反応で動的に作成された入力フィールドの値を取得する方法

Question

Reactでダイナミックを作成しようとしました。これまでのところ、問題なくフォームを表示して隠すことができました。私は今作成されたフィールドから値を取得する必要があり、これはいくつかの問題を引き起こしています。

これまでのコードです。

まず人がボタンをクリックしたときに追加されます私の動的コンポーネント：

const mediaFields = this.state.mediaFields.map((Element, index) => { 
 
     return <Element key={ index } index={ index } /> 
 
    })

：私は、レンダリングの部分で

class MediaInput extends React.Component { 
 
    render() { 
 
    const linkName = `link-${this.props.index}`; 
 
    const contentName = `content-${this.props.index}`; 
 
    const linkValue = `this.props.${linkName}`; 
 
    const contentValue = `this.props.${contentName}`; 
 

 
    return (
 
     <div> 
 
     <ControlLabel>Media (optional)</ControlLabel> 
 
     <input 
 
     name={ linkName } 
 
     value={ linkValue } 
 
     className="form-control" 
 
     placeholder="Add your media url" 
 
     type="text" 
 
     /> 
 
     <input 
 
     name={ contentName } 
 
     value={ contentValue } 
 
     className="form-control" 
 
     placeholder="Add your media content" 
 
     type="text" 
 
     /> 
 
    </div> 
 
    ); 
 
    } 
 
}

ファースト

これは、それがレンダリングされる私のフォームの一部である：私は親コンポーネントの状態でこれらの値を保存したい

<div> 
 
    { mediaFields } 
 
    <Button onClick={() => this.add() }>Add media field</Button> 
 
    <Button onClick={() => this.remove() }>Remove media field</Button> 
 
</div>

：

mediaUrls: { "link-0": null, "link-1": null, "link-2": null}, 
 
mediaContents: { "content-0": null, "content-1": null, "content-2": null}

少しばかりですが、この例を使用しようとしていました Example 私はlinkValueとcontentValueを設定した最初の部分が正しくないことを知っていますが、どのように修正する必要がありますか？

私はまだ要素にonChangeメソッドを渡す必要があることを知っていますが、それは次のステップです。

UPDATE：

私は、これはそれを行うためのクリーンな方法になると思いますが、今、私は別の問題を抱えています。

私は値を格納する配列を作成します。私は子供の中でそれらを読むことができますが、どのように今私は親の変更を保存するのですか？親の中の子供のインデックスを読むには、どうすれば適切な場所に保存することができますか？

class MediaInput extends React.Component { 
 
    render() { 
 
    const linkName = `link${this.props.index}`; 
 
    const contentName = `content${this.props.index}`; 
 

 
    return (
 
     <div> 
 
     <ControlLabel>Media (optional)</ControlLabel> 
 
     <input 
 
     onChange={this.props.handleChange} 
 
     name={ linkName } 
 
     value={ this.props.mediaUrls[this.props.index]} 
 
     className="form-control" 
 
     placeholder="Add your media url" 
 
     type="text" 
 
     /> 
 
     <input 
 
     name={ contentName } 
 
     value={ this.props.mediaContents[this.props.index]} 
 
     className="form-control" 
 
     placeholder="Add your media content" 
 
     type="text" 
 
     /> 
 
    </div> 
 
    ); 
 
    } 
 
}

私の状態：

 mediaUrls: [ '', '', ''], 
 
     mediaContents: ['', '', ''],

どのようにすべきである私のhandleChange機能を見て、私は入力が変化するたびにSETSTATEしたい場合は？私はインデックスを読んでそれに基づいて私の配列を変更したい。

// Handle media fields 
 

 
    handleChange(e){ 
 
    const mediaUrls = this.state.mediaUrls; 
 
    // based on the index, change the value in the array 
 

 

 
    this.setState({ ??? }); 
 
    }

Answer 1

単にコールバックにそれを渡し、更新するための親にインデックスを取得します。

class MediaInput extends React.Component { 
    // ... 
    render() { 
    return (
     <div> 
     <ControlLabel>Media (optional)</ControlLabel> 
     <input 
     onChange={(event) => this.props.handleChange(event, this.props.index)} /> 

When dealing state in React, treat it as immutable.

handleChange(e, index) { 
    // Shallow copy of array 
    const mediaUrls = this.state.mediaUrls.slice(); 
    mediaUrls[index] = e.target.value; 
    this.setState({mediaUrls: mediaUrls}); 
});