reactjs中的文本字段更新问题答案

【问题标题】：issue with textfield update in reactjsreactjs中的文本字段更新问题
【发布时间】：2020-05-08 07:54:00
【问题描述】：

在状态，我有这样的项目：

item: {
  id: -1,
  name: "",
  email: "",
  phone: "",
  country: [],
  is_active: true
},

文本字段代码如下：

<div className="col-md-6 col-12">
  <div className="form-group">
    <label><IntlMessages id="DIC_ADMIN_SETTINGS_ACCOUNT_MANAGERS_EMAIL" /></label>
    <label className="text-danger" style={styles.star_style}><sup>{"*"}</sup></label>
    <TextField 
      error={errorInputs.email}
      margin="normal"
      fullWidth
      id={"email"}
      //value={item.email}
      type={"email"}
      onChange={() => this.handleChange("email")}
      onBlur={() => this.handleBlur("email")}
    />
  </div>
</div>

句柄变化事件如下：

handleChange = name => event => {
  const {
    item
  } = this.state

  switch (name) {
    case "name": {
      this.setState({
        name: event.target.value
      });
      break;
    }

    case "email": {
      this.setState({
        email: event.target.value
      });
      break;
    }

    case "phone": {
      this.setState({
        phone: event.target.value
      });
      break;
    }
  }
};

但无法更新文本字段以读取值。如何解决这个问题？

【问题讨论】：

标签： reactjs redux material-ui state updates

【解决方案1】：

你有两个主要问题！

对于第一个，您应该知道onChange 接受一个回调，该回调接受event 作为道具。如果您需要每个输入的名称，您应该使用currying 或data attributes。在您的代码中，您使用了curry，因此您应该像下面这样执行此操作。

<TextField
  onChange={this.handleChange("email")}
  onBlur={this.handleBlur("email")}
/>

第二个是关于setState。我建议你阅读react documentation about setState。要处理更改状态，您应该考虑 setState 上的 item，强烈建议将回调返回到 setState，而不是像下面这样的对象。

  handleChange = name => event => {
    const {target: { value }} = event;
    switch (name) {
      case "name": {
        this.setState(prevState => ({
          item: { ...prevState.item, name: value }
        }));
        break;
       }
       case "email": {
         this.setState(prevState => ({
           item: { ...prevState.item, email: value }
         }));
         break;
      }
      case "phone": {
        this.setState(prevState => ({
          item: { ...prevState.item, phone: value }
        }));
        break;
      }
   }
};

【讨论】：

【解决方案2】：

针对您的问题的解决建议：

由于你只是更新状态，handleChange中没有任何逻辑，我建议直接使用setState，如下所示：-

// To avoid typos
const NAME_FIELD_KEY = "name";
const EMAIL_FIELD_KEY = "email";
const PHONE_FIELD_KEY = "phone";

// No need to club all fields for onChange
onChange={(event) => this.setState({ [EMAIL_FIELD_KEY]: event.target.value })}
onBlur={() => this.handleBlur(EMAIL_FIELD_KEY)}

// Suitable for onBlur
handleBlur(fieldName) {
  const { item } = this.state;

  switch (fieldName) {
      case NAME_FIELD_KEY:
        const value = item[NAME_FIELD_KEY];
        // Do validation for name here
        break;
      case EMAIL_FIELD_KEY:
        const value = item[EMAIL_FIELD_KEY];
        // Do validation for email here
        break;
      case PHONE_FIELD_KEY:
        const value = item[PHONE_FIELD_KEY];
        // Do validation for phone here
        break;
  }
}

【讨论】：

【解决方案3】：

您的 onChange 和 onBlur 应该如下所示，因为它们又返回一个函数：

onChange={this.handleChange("email")}
onBlur={this.handleBlur("email")}

【讨论】：