如何在「父」組件中獲取`textField`的值

我在我的用戶定義的component中設置了一個material-ui/TextField。用戶定義的component被命名爲LabelTextField。我在我的用戶定義的component中呈現了幾個LabelTextField，它名爲TextList。我的問題是如何獲得TextList組件中的textField的值。按鈕位於View組件中的TextList組件旁邊。當有人點擊按鈕時，我將保存所有TextField值。我將在TextList組件中發佈網絡請求以將值保存到後端。我正在使用redux。是否每個material-ui/TextField都應該在onChange回調函數中調度value？的onChange在這個網站的底部：如何在「父」組件中獲取`textField`的值

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：

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

來源

2017-03-17 jiexishede

你需要給LabelTextField change事件的處理程序。

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狀態更新。

如果你有更復雜的情況，你可以考慮使用REDX或甚至http://redux-form.com/6.5.0/

來源

2017-03-17 08:49:38 OlliM

如何在「父」組件中獲取`textField`的值

回答

相關問題