Question

我有一个应用程序，试图让用户更新输入文本。当我显示用户详细信息时，我有一个表格，每一行都有一个编辑和删除按钮。当用户单击“编辑”按钮时，我使用表格中自动填充的用户数据来呈现表单，但是输入字段不允许编辑。

             initialDataState: {
                  username: '',
                  firstName: '',
                  lastName: '',
                  idNo: '',
                  email: '',
                  mobile:'',
                },

            handleChange = async (event) => {
                if (event.target) {
                  event.preventDefault();
                  const { target: { name, value }, } = event;
                  console.log('name ', name);
                  this.setState({
                    initialDataState: {
                      ...this.state.initialDataState,
                      [name]: value,
                    },
                  });
              }


      render () {
        const { initialDataState } = this.state;  
        return (
    <MDBCol md="6">
            <InputComponent
                name="Last Name"
                id="LastName"
                label="Passport Number"
                disabled={false}
                value={initialDataState.lastName}
                type="text"
                step="100"
                minLength="13"
                maxLength="13"
                required={true}
                outline={true}
                handleChange={this.handleChange}
            />
          </MDBCol>;
    )
}

Answer 1

您将name="Last Name"传递给input，并将其设置为状态时使用，但是将值传递给输入时，您访问initialDataState.lastName。

"Last Name"与"lastName"

不同

更改

<InputComponent
  name="Last Name"

到

<InputComponent
  name="lastName"

应解决此问题。

编辑React js表单字段不可编辑

1 个答案: