「父」コンポーネントの `textField`値を取得する方法

Question

material-ui/TextFieldを私のユーザ定義のcomponentに設定しました。 ユーザー定義のcomponentは、LabelTextFieldという名前です。 というユーザー定義のいくつかのLabelTextFieldをレンダリングします。この名前はTextListです。 私の質問は、TextListコンポーネントのtextFieldの値を取得する方法です。 ボタンは、ビューコンポーネントのTextListコンポーネントの横にあります。ユーザーがボタンをクリックすると、すべてのTextFieldの値が保存されます。 TextListコンポーネントにネットワークリクエストを送信して、値をバックエンドに保存します。 私はreduxを使用しています。 すべてmaterial-ui/TextFieldは、コールバック関数にvalueをディスパッチする必要がありますか？ onChangeこのウェブサイトの下部にある：

http://www.material-ui.com/#/components/text-field

私の英語が悪いです。私に理解してもらえるコードを教えてください。

マイ中央コード：

LabelTextField：

textChangeFun = (value) => { 

    } 


    render() { 
    return (
     <div> 
      <div style={{fontSize:0}}> 
      <div style={inlineStyle}> 
       <FlatButton disableTouchRipple={true} disabled={true} label={this.props.labelValue} /> 
      </div> 
      <div style={inlineStyle}> 
       <TextField 
        hintText={this.props.textValue} 
       /> 
      </div> 
      </div> 
     </div> 
    ); 
    } 

TextList：あなたは変更イベントのハンドラをLabelTextField与える必要が

render(){ 
    return (
     <div> 
      {demoData.map((item,id) => 
      <LabelTextField key={id} labelValue={item.label} textValue={item.text} ></LabelTextField> 
      )} 
     </div> 
    ) 
    } 

Answer 1

。

class LabelTextField extends React.Component { 

    onChange(e) { 
    this.props.onChange({ id: this.props.id, value: e.currentTarget.value }) 
    } 

    render() { 
    return (
     <div> 
      <div style={{fontSize:0}}> 
      <div style={inlineStyle}> 
       <FlatButton disableTouchRipple={true} disabled={true} label={this.props.labelValue} /> 
      </div> 
      <div style={inlineStyle}> 
       <TextField 
        hintText={this.props.textValue} 
        onChange={this.onChange.bind(this)} 
       /> 
      </div> 
      </div> 
     </div> 
    ); 
    } 
} 

class TextList extends React.Component { 
    constructor() { 
    super(); 
    this.state.textFields = {}; // TODO: get initial state from demoData 
    this.onTextFieldChange = this.onTextFieldChange.bind(this); 
    } 

    onTextFieldChange = ({ id, value }) { 
    const { textFields } = this.state; 
    textFields[id] = value; 
    this.setState({ textFields }); 
    } 

    render(){ 
    return (
     <div> 
      {demoData.map((item,id) => 
      <LabelTextField key={id} labelValue={item.label} textValue={item.text} onChange={this.onTextFieldChange} ></LabelTextField> 
      )} 
     </div> 
    ) 
    } 
} 

この方法でテキストフィールドが変化し、いつでも、それはonTextFieldChangeハンドラが呼び出されますとTextListの状態が更新します。

もっと複雑な状況がある場合は、reduxまたはevenを使用することを検討してください。http://redux-form.com/6.5.0/