使用 this.props 时禁用不适用于复选框

Question

我该如何进行这项工作？

<input type="checkbox" id={"delivery-" + this.props.ID} {this.props.disableIt ? 'disabled' : ''} />

我期待这段代码 - {this.props.disableIt？ 'disabled' : ''} - 输出 'disabled' 属性，但抛出 'Unexpected token (102:89)'。但是如果我直接在里面放一个静态的'disabled'字，它就可以了。

Answer 1

使用react时，disabled是需要设置true或false的prop。当你只定义没有值的 prop 时，这个 prop 是布尔值，那么默认情况下将值设置为 true。这就是当您手动定义道具时它起作用的原因。

<input type="checkbox" disabled={false} />
<input type="checkbox" disabled={true} />
<input type="checkbox" disabled />
<input type="checkbox" id={"delivery-" + this.props.ID} disabled={this.props.disableIt} />

例如：

var Example = React.createClass({
  getInitialState: function() {
    return {
      disabled: false
    };
  },

  toggle: function() {
    this.setState({
      disabled: !this.state.disabled
    });
  },

  render: function() {
    return (
      <div>
        <p>Click the button to enable/disable the checkbox!</p>
        <p><input type="button" value="Enable/Disable" onClick={this.toggle} /></p>
        <label>
          <input type="checkbox" disabled={this.state.disabled} />
          I like bananas!
        </label>
      </div>
    );
  }
});

ReactDOM.render(
  <Example />,
  document.getElementById('container')
);

这是工作示例：https://jsfiddle.net/crysfel/69z2wepo/59502/

祝你好运！

使用 this.props 时禁用不适用于复选框

Disable does not work for checkbox when using this.props

javascript

reactjs

react-jsx