Question

如何使用函数参数作为属性名称来更新状态，即

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

上面的代码抛出错误

我想使用那个propertyName变量作为对象关键字，我用谷歌搜索并尝试了许多不同的技术，例如this.state.formFields[propertName]

我正在创建一个新的Web应用程序，我有一些表单字段需要填写才能登录到管理区域。我只有三种方法，只是更新相关状态，基本上就可以做同样的事情

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"
      />

我只想拥有一个仅使用该properName来更新所有三个字段的函数

致谢

Answer 1

欢迎使用StackOverflow。您可以通过将属性名称括在方括号中来实现此目的，以便将键的值评估为变量而不是propertyName。

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

使用方法参数作为对象键进行反应以更新状态

1 个答案: