reactjs 中的文本字段更新问题

Question

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

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

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

Answer 1

您的 onChange 和 onBlur 应该如下所示，因为它们反过来 return 一个函数：

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

Answer 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;
  }
}

Answer 3

你有两个主要问题！

对于第一个，你应该知道 onChange 接受一个回调，回调接受 event 作为道具。如果你需要每个输入的名字，你应该使用currying or data attributes。在你的代码中，你使用了 curry 所以你应该像下面那样做。

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

第二个大约是setState。我推荐你阅读react documentation about setState。要处理更改状态，您应该考虑 setState 上的 item，强烈建议 return 对 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;
      }
   }
};

reactjs 中的文本字段更新问题

issue with textfield update in reactjs

reactjs

redux

material-ui

state

updates