时间戳

首页 > 解决方案 > 编辑 React js 表单字段不可编辑

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

问题描述

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

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

标签： reactjs

解决方案

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

"Last Name"不一样"lastName"

改变

<InputComponent
  name="Last Name"

到

<InputComponent
  name="lastName"

应该解决这个问题。

推荐阅读