React 使用方法參數作為對象鍵來更新狀態

Question

如何使用函數參數作為屬性名稱來更新狀態，即

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

上面的代碼拋出錯誤

我想使用那個propertyName變量作為對象鍵，我用this.state.formFields[propertName]搜索並嘗試了許多不同的技術，比如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"
      />

我只想擁有一個函數來更新所有三個字段，只需使用該正確名稱

問候

Answer 1

歡迎使用 StackOverflow。 您可以通過將屬性名稱括在方括號中來實現這一點，以便它將鍵作為變量而不是實際的 propertyName 進行計算。

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