Question

我想使用复选框来表示true / false值。我们的想法是渲染一个复选框，当选中时，将状态更改为“1”，如果未选中，则将状态更改为“0”。现在这是我的组件状态：

this.state = {
    attrValue: ''
};

JSX复选框：

<div className="col-md-4 col-sm-4">
                    <input
                        type="checkbox"
                        checked={this.state.attrValue === '1'}
                        value={this.state.attrValue}
                        onChange={this._handleInputChange}
                        name="attrValue"
                    />
                </div>

on on change handler：

_handleInputChange(e) {
    const element = e.target;
    const stateObject = {};

    stateObject[element.name] = element.value;
    this.setState(stateObject);
}

截至目前，单击复选框不会修改状态。我不完全确定这是否可能。使用单选按钮，我只需渲染一个真假单选按钮，其值设置为1和0.非常感谢任何帮助！

Answer 1

你的代码并不太远。

看看我创造的这个小提琴。请注意，我将初始状态设置为更简单的布尔值而不是空字符串，并将状态设置为其onChange上的复选框的值。

http://jsfiddle.net/tp3k4wpL/

class Foo extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      attrValue: false
    };
    this._handleInputChange = this._handleInputChange.bind(this);
  }
  _handleInputChange(e) {
      const element = e.target;
      this.setState({attrValue: element.checked});
  }
  render() {
    return (
    <div className="col-md-4 col-sm-4">
        <input
            type="checkbox"
            checked={this.state.attrValue}
            onChange={this._handleInputChange}
            name="attrValue"
        />
        {`State of checkbox: ${this.state.attrValue}`}
    </div>
    );
  }
}
React.render(<Foo />, document.body);

反应复选框输入以替换单选按钮

1 个答案: