为什么状态更新时不会填充反应模态输入值？

Question

我有一个在单击按钮时触发的模态，需要填充一个用户可以编辑的输入值。单击按钮时，将更新模式状态，但输入为：

a. 不会将更新的状态反映为其值(当我使用"默认值"时会发生这种情况( --或--

b. 不会让用户编辑输入中的值(当我使用"value"时会发生这种情况。

如何使用当前状态填充输入并能够对其进行编辑？ 不应该更改输入值设置的状态以触发模态的重新渲染吗？

function EditModal(props) {
const [value, setValue] = useState(props.modalVal);
const[hidden, setHidden] = useState(true)
const[initialRender, setInitialRender] = useState(true)
useEffect(()=>{
setInitialRender(false)
},[])
useEffect(() => {
setValue(props.modalVal)// <-- why doesn't this update input value?
}, [props.modalVal]);
useEffect(()=>{
if(!initialRender){
setHidden(false)
}
},[value])
return (
<Modal hidden={hidden} >
<Text>Edit Item</Text>
<form action="submit" onSubmit={props.submit}>
<Input onChange={props.handleChange} defaultValue={value} />
<Button>OK</Button>
</form>
</Modal>
)
}

Answer 1

如果使用value设置值，则当用户编辑该值时，需要确保指定的onChange函数更新该值，以便在下次呈现时更新该值。

看起来你有一个值(props.modalVal(，你应该用它作为value(请注意，你不需要useEffect或useState，因为改变道具会导致重新渲染(。因此，您需要确保的是props.handleChange变化modalValue

像这样：

<Input onChange={props.handleChange} value={props.modalValue} />

在父组件中：

const ParentComponent = ()=> {
const [modalValue, setModalValue] = useState('initialValue');
const handleChange = (event) => {
setModalValue(event.currentTarget.value);
};
return (
<EditModal handleChange={handleChange} modalValue={modalValue} />
)
}