проблема с обновлением текстового поля в reactjs - PullRequest
Новая
       94

проблема с обновлением текстового поля в reactjs

1 голос
/ 08 мая 2020

В состоянии у меня есть такой элемент: 

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

Но не удалось обновить текстовое поле для чтения значений. Как это исправить?

Ответы [ 3 ]

1 голос
/ 08 мая 2020

У вас есть две основные проблемы!

Для первой вы должны знать, что onChange принимает обратный вызов, который обратные вызовы принимают event как свойства. Если вам нужно иметь имя каждого входа, вы должны использовать currying или атрибуты данных . В вашем коде вы использовали curry, поэтому вы должны сделать это, как показано ниже. 

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

Второй - примерно setState. Рекомендую прочитать документацию реагировать на setState. Чтобы обработать состояние изменения, вы должны учитывать item на setState, и настоятельно рекомендуется возвращать обратный вызов 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;
      }
   }
};
0 голосов
/ 08 мая 2020

Предложение с исправлением вашей проблемы:

Поскольку вы просто обновляете состояние и не имеете никаких logi c в 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;
  }
}
0 голосов
/ 08 мая 2020

Ваши onChange и onBlur должны быть такими, как показано ниже, потому что они, в свою очередь, возвращают функцию: 

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