主页 / coding / 问题 / 76919735
Accepted
js1069
Asked: 2023-08-17 16:31:01 +0800 CST

输入元素没有只读属性，但字段仍然不可编辑[关闭]

  • 772

我正在 React 创建一个表单，并且有从服务器数据填充的字段。这些字段应该向用户显示当前的内容，并允许他们在提交表单时编辑数据。但是，当我尝试在输入字段中键入内容时，没有任何反应。文本可以选择但不可更改。

这可能是因为我用状态变量中存储的数据填充了字段，因此它保留了从服务器获取的内容的永久值？

这部分代码是负责读取服务器数据并设置状态变量然后传递给Form组件的函数。

const [templateId, setTemplateId] = useState("");
const [templateData, setTemplateData] = useState([]);

function mkForm(selection) {
    if(selection !== "newTemplate"){
        fetch(`http://localhost:3000/custom/${selection}`)
        .then((response) => response.json())
        .then((data)=>{
            setTemplateId(data.id)
            setTemplateData(Object.entries(data.myData));
        })
    } else{
        setTemplateId("");
        setTemplateData([]);
    }
}

这是接收道具的Form组件，这部分仅显示从templateData道具创建输入字段的代码。templateId输入字段在组件的主返回语句中返回，但它几乎相同。

function Form({templateId, templateData}) {
    const showData = templateData.map((item)=>{
        return(
            <div onChange={foo}>
                <input value={item[0]}/> <input value={item[1]} />
            </div>
        )
   })
   ... etc.
   ... etc.
}

我更改了一些变量名称以显示相关的状态变量和道具。

javascript

1 个回答

  1. Best Answer

    当你在 React 中设置字段value的字段时input，该input字段将始终保留该值，因此对你来说，它看起来就像是不可编辑的。

    有两种可能的解决方案。

    使用defaultValue

    如果您同意不使用输入字段的更改值：

    <input defaultValue={someValue} />

    有关更多详细信息，请参阅不受控制的组件。

    添加onChange事件

    最有可能的是，您需要使用您编辑的值，因此在这种情况下：

    <input value={someValue} onChange={handleChange} />

    在这种情况下，handleChange需要编写您的方法，以便value在更改时更新您的方法。

    请参阅受控组件以供参考。

    • 1

相关问题