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'))