React自定义TextInput控件无法键入任何内容

Question

我有一个控件MyCustomTextInput，如下

function MyCustomTextInput (props)
return {
<div>
<TextInput
value={props.value} </TextInput>
</div>
}

此MyCustomTextInput用于表单，如下所示

<td>
<MyCustomTextInput value="MyModelClass.MyName"> </MyCustomTextInput>
</td>
<td>
<MyCustomTextInput value="MyModelClass.MyAddress"> </MyCustomTextInput>
</td>

我遇到的问题是-我可以看到MyName和MyAddress加载到自定义控件中，但我不能在文本控件中键入任何内容

你能告诉我这里缺少什么吗

感谢您的帮助

Answer 1

您的代码看起来有点奇怪，所以我对它做了一些更改。首先，您应该将值放入文本输入字段的defaultValue属性中。所以它应该看起来像：

function MyCustomTextInput (props) {
return (
<div>
<textarea defaultValue={props.value}></textarea>
</div>
);
}

下一件事是，我建议您为表单元素(如文本区域、输入等(设置组件状态。所以我会让它看起来像：

function MyCustomTextInput (props) {
const [textareaValue, setTextareaState] = useState(props.value);
const handleTextareaChange = (event) => setTextareaState(event.target.value);
return (
<div>
<textarea defaultValue={textareaValue} onChange={handleTextareaChange}></textarea>
</div>
);
}