Question

我在用户定义的material-ui/TextField中设置了component。用户定义的component名为LabelTextField。我在用户定义的LabelTextField中呈现了几个component，其名为TextList。我的问题是如何在textField组件中获取TextList的值。视图组件中的TextList组件旁边有一个按钮。当有人点击按钮时，我会保存所有TextField值。我将在TextList组件中发布网络请求，以将值保存到后端。我正在使用redux。每个material-ui/TextField是否应该在value回调函数中调度onChange？ 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：

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

Answer 1

您需要为LabelTextField提供更改事件的处理程序。

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

这样，只要textField发生更改，就会调用onTextFieldChange处理程序并更新TextList状态。

如果您遇到更复杂的情况，可以考虑使用redux甚至http://redux-form.com/6.5.0/

如何在＆＃34;父亲＆＃34;中获取`textField`的值零件

1 个答案: