Question

我是React的新手，我试图在React中使用材料UI设计表单。我能够使用文本字段设计表单，但是如果我对文本字段使用value属性，则无法编辑数据。当子组件中的Textfield调用onChange函数时，如何调用父函数。这是我的代码。

我在父组件中包括这样

 render() {
const { name, email, mobileNumber } = this.state.serviceRequest;

return (
  <div>
  <HomeTemplate 
  handleShow = {this.handleShow}
  handleClose = {this.handleClose}
  name = {name}
  email ={email}
  mobileNumber = {mobileNumber}
  DateFnsUtils ={DateFnsUtils}
  handleDateChange ={this.handleDateChange}
  handleChange = {this.handleChange}
   /> 
 </div>
  );

}

在子组件中，我有这样的文本字段。由于无法发布整个代码，我正在发布部分代码，这对于解决问题很有用。我还将在评论中发布粘贴bin链接。

 <TextField
            autoFocus
            margin="dense"
            id="emailId"
            label="Email Address"
            type="email"
            value= {props.email}
            fullWidth
          />

请建议我该怎么做？

Answer 1

您可以将父项的功能作为prop发送给子项，并将其设置为onChange的{{1}}道具。

例如，假设您的Child组件如下所示：

TextField

现在，您的父组件负责发送function Demo(props) { return ( <TextField fullWidth id="standard-name" label="Name" value={props.name} // it gets value from prop onChange={props.onNameChange} // it gets handler function from prop too! margin="normal" /> ); }和props.name：

props.onNameChange

这是完整的演示：

class App extends React.Component {
  state = {
    name: "Sleepy cat"
  };

  handleNameChange = event => {
    this.setState({ name: event.target.value });
  };

  render() {
    return (
        <Demo 
          onNameChange={this.handleNameChange}  // send a function as prop, that will change the state in parent
          name={this.state.name}                // send the state of parent to child
        />
    );
  }
}

const {TextField} = window['material-ui'];

function Demo(props) {
  return (
    <TextField
      fullWidth
      id="standard-name"
      label="Name"
      value={props.name}
      onChange={props.onNameChange}
      margin="normal"
    />
  );
}

class App extends React.Component {
  state = {
    name: "Sleepy cat"
  };

  handleNameChange = event => {
    this.setState({ name: event.target.value });
  };

  render() {
    return (
      <div>
        <code>{"Parent State: " + JSON.stringify(this.state)}</code>
        <Demo onNameChange={this.handleNameChange} name={this.state.name} />
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Answer 2

您想要实现的是开发人员在使用react构建应用程序时所需要的普遍需求。

您希望子组件在调用onChange事件时反映变化的数据。

请注意，子组件可以具有其自己的状态，但是如果有多个组件需要反映相同的变化数据，则可以将状态提升到最接近的祖先。

@mehamasun已经在他的示例中说明了如何做到这一点。

父项（状态）->子项（props）-> //已调用的事件->父项（状态通过事件处理程序更改）->重新渲染子项（props）

无法在React中编辑Material UI文本字段

2 个答案: