Reactjs:设置状态与复选框:选中或未选中

Reactjs: setState with checkbox: checked or unchecked

本文关键字：设置 状态 Reactjs 复选框      更新时间：2023-09-26

我目前正在用Reactjs"试水"。根据他们的文档，我提出了一个我坚持的小项目。到目前为止，当选中该复选框时，状态会发生变化，但是....不确定如何更改未选中的状态：

var Foo = React.createClass{(
 getInitialState: function() {
    return {
      location: true,
    }
  },
 onClick: function() {
  this.setState({ location: false });
 },
 render: function() {
    var inlineStyles = {
      display: this.state.location ? 'block' : 'none'
    };
  return (
   <div>
    <input type="checkbox"
     onClick={this.onClick}
    /> show / hide bar
    <hr />
    <div style={inlineStyles}>
     <p>bar</p>
    </div>
   </div>
  );
 }
)};

我需要为我想要的东西使用if statement吗？我需要在未选中时this.setState.location: true。

您需要在单击期间读取复选框的状态，并将其应用于您的 React 状态。

var Foo = React.createClass({
    render: function() {
        return <input type="checkbox" onClick={this.onClick} checked={!this.state.location}></input>
    },
    
    onClick: function(e) {
        this.setState({location: !e.target.checked});
    },
    
    getInitialState: function() {
        return {
            location: true
        };
    }
});
相关文章：