ReactJSさまざまなフォーム入力の小道具配列

Question

フォームのさまざまな量の小道具データを動的に処理する方法を理解しようとしています。私のgoogle huntは何も出てこなかった。私は、関連するユーザーが持っている番号の犬に基づいて予定の数に関するデータを収集しています。小道具はこのようになります：

this.props: { 
    user: { 
    id: 11 
    name: "Steve", 
    age: 32 
    } 
    dogs: [{ 
    id: 18, 
    name: "Rover" 
    },{ 
    id: 42, 
    name: "Snugglemittens" 
    }] 
} 

すべてのユーザーの犬の数が異なります。そして、私の親要素のビューは、次のようになります

render(){ 
    <form onSubmit={this._handleSubmit.bind(this)}> 
     {this.props.dogs.map((dogge)=>{ 
     return(<MsgView dog={dogge} key={dogge.id} />;) 
     }} 
     <button type="submit">Submit</button> 
    </form> 
} 

は、その後、私はそれぞれの犬についての2つのチェックボックスを収集する各メッセージビュー内

：

render(){ 
    <div className="form-group" data-toggle="buttons"> 
    <label><input type="checkbox" autoComplete="off"/> XYZ </label> 
    </div> 
    <div className="form-group" data-toggle="buttons"> 
    <label><input type="checkbox" autoComplete="off"/> ABC </label> 
    </div> 
} 

私は記入を取得するかどうかはわかりませんajaxを使用してバックエンドにデータを戻します。私の最初の考えは、状態を使って情報を収集し、一度にすべてを返すことでした。私はReactが使うことができる小道具を使って関数を渡すことができますが、良い例は見つけられません。

Answer 1

これは私が働くことができると考えているものです。あなたはそのe.target.value場合、私は覚えていないが、あなたは私が取得していますかを確認する必要がありthis.stateたときにビューをロード、

// or in a lifecycle method componentWillMount or componentDidMount instead 
// and do in constructor, this.state = { dogs: [] } 
// sorry, this is kind of hard to do abstractly 

constructor(props) { 
    super(props) 
    // on pageload, set initial state to the doggo array 
    this.state = { 
    dogs: this.props.dogs 
    } 
} 

// alternate solution potential: 
componentDidMount() { 
    this.setState({ dogs: this.props.dogs }) 
} 

_handleSubmit() { 
    console.log('FIELDS:', this.state.dogs) 
    // now we're in business if you see your data 
} 

render(){ 
    if (this.state.dogs.length === 0) return <div>No dogs yet, loading spinner</div> 
    return (
     <form onSubmit={() => this._handleSubmit()}> 
     {this.state.dogs.map((dogge)=> { 
      return(
      <MsgView 
       dog={dogge} 
       key={dogge.id} 
       {/* on change, update state of field */} 
       onChange={(e) => this.setState({ 
       {/* ie: dogs[0], dogs[45] 
        you might have to use ES6 .find() or something 
        you guys/girls see where I'm going with this 
        basically update the array or make better data structure. 
        I like the idea of this.state.dogs[doggo] 
        (so dogs is an object with dynamic keys) 
        then you can just update the value of that key with setState */} 
       dogs[this.state.dogs.indexOf(dogge)]: e.target.value 
       })} 
      /> 
     )} 
     } 
     <button type="submit">Submit</button> 
     </form> 
    ) 
    } 

を取り込むことができます。

1. あなたが
2. 後のあなたは `Reduxの-form`を調査した