Реагировать с использованием параметра метода в качестве ключа объекта для обновления состояния - PullRequest
Новая
       5

Реагировать с использованием параметра метода в качестве ключа объекта для обновления состояния

0 голосов
/ 26 января 2019

Как я могу использовать параметр функции в качестве имени свойства для обновления состояния, например 

onStudentPinChange = (propertyName, e) => {
    this.setState({
      formFields: { ...this.state.formFields, propertyName: e.target.value }
    });
};

приведенный выше код сгенерировать ошибку

Я хотел бы использовать эту переменную propertyName в качествеключ объекта Я погуглил и попробовал много разных техник, таких как this.state.formFields[propertName]

Я создаю новое веб-приложение. У меня есть несколько полей формы, которые необходимо заполнить, чтобы войти в область администратора.У меня есть три метода, которые в основном делают одно и то же, просто обновляя соответствующее состояние 

onStudentPinChange = (propertyName, e) => {
    var item = { ...this.state.formFields };
    item[propertyName] = e.target.value;
    console.log(item);
    this.setState({
      formFields: { ...this.state.formFields, studentPin: e.target.value }
    });
  };

  onCNICChange = (propertyName, e) => {
    this.setState({
      formFields: { ...this.state.formFields, cnic: e.target.value }
    });
  };

  onPasswordChange = (propertyName, e) => {
    this.setState({
      formFields: { ...this.state.formFields, password: e.target.value }
    });
  };



<InputField
        type="text"
        name="student_pin"
        value={this.state.formFields.studentPin}
        placeholder="Student Pin"
        onChange={this.onStudentPinChange.bind(this, "studentPin")}
        faClassName="fa-user"
      />

Я хотел бы иметь только одну функцию, которая обновляет все три поля, используя только правильное имя

С уважением

1 Ответ

0 голосов
/ 26 января 2019

Добро пожаловать в StackOverflow. Этого можно добиться, заключив имя свойства в квадратные скобки, чтобы он оценивал ключ как переменную, а не на самом деле propertyName. 

onStudentPinChange = (propertyName, e) => {
    this.setState({
        formFields: {
            ...this.state.formFields,
            [propertyName]: e.target.value
        }
    });
};
...