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コンポーネントを作成して、状態の変更を親ページコンポーネントで追跡できるようにするにはどうすればよいですか？この要件に適合する既存のコンポーネントがあり、ホイールを再開発することなく反応エコシステムで広く使用されていますか？

Answer 1

別個のコンポーネントを引き出すことが本当に便利であるかどうかは分かりません。機能がほんのわずかしかないためです。ここ

の作業フィドル：あなたのChkboxListコンストラクタが値を返さない2つのeslint警告（矢印機能を提供します

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