时间戳

首页 > 解决方案 > 为什么这个反应 handleChange 不起作用？尝试处理 props 收到的更改

javascript - 为什么这个反应 handleChange 不起作用？尝试处理 props 收到的更改

问题描述

我在反应中有一个输入字段，其值最初由组件接收的道具设置

<EditUserModal 
   show={this.state.showModal} 
   close={this.closeModal} 
   userId={this.state.rowId} 
   email={this.state.selectedMail}
/>

如您所见，它收到了价值电子邮件，并且在组件内部我可以看到价值正确变化

<div class="form-group emailgroup">
  <label for="exampleFormControlInput1">Change Email Address</label>
  <input 
    type="email"
    class="form-control"
    placeholder="name@example.com"
    value={this.props.email}
    onChange={this.handleChange} 
  />
</div>

问题是，我添加了一个 handleChange 事件，以便能够修改该输入，但它没有修改电子邮件，我想这是因为我应该更改父组件中的道具，但我不明白该怎么做。目前我的 handleChange 函数看起来像这样。

handleChange = (evt) => {
  this.setState({
    email: evt.target.value
  });
}

这是组件的初始状态

this.state = {
  email : ""
};

显然，由于我没有调用状态，而是分配字段值的道具，所以它不会改变。但是我试过了......

this.state = {
  email : props.email
};

它让我可以这样改变它，但问题是它最初不会在输入值中呈现任何内容。

标签： javascriptreactjs

解决方案

不要将您的道具分配给状态，而是从父组件调用您的函数并将状态值传递给子组件。

您可以参考此内容以更好地了解父子数据流。

如何在 React 中从父组件更改子组件的状态

推荐阅读