React js Material Ui TextField 默认值不会改变

Question

我想在状态改变时改变TextField的默认值，但它不起作用。我猜它不会重新渲染。

<TextField
multiline={true}
rows={15}
disabled
id="outlined-basic" label="" variant="outlined"
defaultValue={!isEn?data.data[0].description:data.data[0].descriptionLocalization.en}
/>
<Button style={{position:"absolute",right:"20px",bottom:"5px"}} onClick={changeStateIsEn}>Save</Button>}

Answer 1

默认值不能随状态而改变。

您应该将value设置为反映默认值

<TextField
multiline
rows={15}
disabled
id="outlined-basic" 
label="" 
variant="outlined"
defaultValue="Something that will stay there initially only"
value={!isEn ? data.data[0].description : data.data[0].descriptionLocalization.en}
/>

Answer 2

你的TextField组件缺少两部分，这两部分是将输入绑定到状态所必需的。

1. 正如用户Mohammad Fasial所说，defaultValue道具仅适用于组件将具有的默认值。你要找的正确道具是value。国家需要等于value。
2. 当用户向TextField输入输入新信息时，要监听变化，您需要使用onChangeprop。onChangeprop(关于更改侦听器)允许您提供一个函数作为参数，以便在输入值更改时运行。在这种情况下，我们希望设置onChange运行setExampleState，通过使用event.target.value属性将状态设置为输入字段的值。

function ExampleComponent(){
const [exampleState, setExampleState]  = useState([]);
...
return (
<>
<TextField
multiline={true}
rows={15}
disabled
id="outlined-basic" label="" variant="outlined"
defaultValue={!isEn?data.data[0].description:data.data[0].descriptionLocalization.en}
value={exampleState}
onChange={(event) => setExampleState(event.target.value)}
/>
<Button style={{position:"absolute",right:"20px",bottom:"5px"}} onClick={changeStateIsEn}>Save</Button>
</>
);
}

要了解更多关于TextField的不同属性，您可以查看TextField API文档。还有很多TextField代码示例，可以在Material-UI站点上展开。

Answer 3

在默认值更改后更新元素或容器的key