Question

我如何使这项工作？

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

我期待这段代码 - {this.props.disableIt？ 'disabled'：''} - 输出'禁用'属性，但会抛出'Unexpected token（102：89）'。但是，如果我直接在其中放置一个静态的“禁用”字，它就会起作用。

Answer 1

使用反应时，disabled它是您需要设置true或false的道具。当你只是定义没有值的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时，禁用对于复选框不起作用

1 个答案: