reactjs checkboxlist组件-更新父级中的状态更改

Question

我有很多复选框列表要求。我将详细解释。我有一堆语言说：

var languages = ["English", "German", "French", "Spanish", "Mandarin", "Tamil"]

我有一个父组件，该组件具有一个表单，其中有四个部分，请说：

class Page extends React.Component {
  render() {
    return (
      <form>
        <h1>CanSpeak</h1> <chkboxlist someProp="speak" />
        <h1>CanSpeak</h1> <chkboxlist someProp="read" />
        <h1>CanSpeak</h1> <chkboxlist someProp="write" />
        <h1>CanSpeak</h1> <chkboxlist someProp="understand" />
        <button
          onClick={e => {
            console.log("Need the various chkboxlist values here");
            e.preventDefault();
          }}
        >
          Save
        </button>
      </form>
    );
  }
}

我希望chkboxlist组件跟踪每个部分中的所选语言列表，并在“保存”按钮单击处理程序中提供它们。我希望在“页面”组件中跟踪状态更改（每个部分下所选语言的列表）。

我不想使用redux或某些此类外部状态管理。

现在创建该chkboxlist组件的方式是什么，以便可以在父Page组件中跟踪状态更改？是否有任何现有组件都可以满足此要求，并在React生态系统中得到广泛使用，而无需重新发明轮子？

Answer 1

我不知道引入一个单独的组件是否真的有用——因为它只是一小部分功能。

在这里工作小提琴：https : //jsbin.com/tusakexire/edit? html,js, output

你可以这样做：

class Chkboxlist extends React.Component {
  constructor(props) {
      super(props) 
      this.state = {}
      props.values.map((v, i) => {
          this.state[v] = false
      })
  }

  onChange(key, value) {
      this.setState({ [key]: value }, (state) => {
          this.props.onChange(this.state)
      })
  }

  render() {
      return (
          <div className="list-group-item form-group">
                {this.props.values.map((value, i) => (
                    <div className="checkbox" key={i}>
                        <label>
                            <input 
                                onChange={(e) => this.onChange(value, e.target.checked)} 
                                type='checkbox' 
                                value={this.state[value]}
                            />
                            {value}
                        </label>
                    </div>
                ))}
          </div>
      )
  }
}

class Page extends React.Component {

  constructor(props) {
      super(props)
      this.state = {}
  }

  onChange(name, values) {
      this.setState({ [name]: values })
  }

  render() {
    const languages = ["English", "German", "French", "Spanish", "Mandarin", "Tamil"]


    return (
        <div className="container">
            <div className="row">
              <form className="form">

                <div className="list-group col-xs-6">
                    <h4>Can Speak</h4> 
                    <Chkboxlist 
                        onChange={(values) => this.onChange('speak', values)}
                        values={languages}
                    />
                </div>

                <div className="list-group col-xs-6">
                    <h4>Can Read</h4> 
                    <Chkboxlist 
                        onChange={(values) => this.onChange('read', values)}
                        values={languages}
                    />
                </div>

                <div className="list-group col-xs-6">
                    <h4>Can Write</h4> 
                    <Chkboxlist 
                        onChange={(values) => this.onChange('write', values)}
                        values={languages}
                    />
                </div>

                <div className="list-group col-xs-6">
                    <h4>Can Understand</h4> 
                    <Chkboxlist 
                        onChange={(values) => this.onChange('understand', values)}
                        values={languages}
                    />
                </div>

                <button
                  className="btn btn-primary"
                  onClick={(e) => {
                    console.log(this.state);
                    e.preventDefault();
                  }}
                >
                  Save
                </button>
              </form>
          </div>
      </div>
    );
  }
}

ReactDOM.render(<Page />, document.getElementById('app'))