我在考虑是否需要传递textfield / dropdown的处理程序。
const initialFormFields = {
name: '',
sample_select: '',
}
const [formFields, setFormFields] = useState(initialFormFields);
父组件
const handleInputChange = event => {
event.persist();
const target = event.target;
const value = target.type === "checkbox"
? target.checked
: target.value;
setFormFields(formFields => ({...formFields,[target.name]: value}));
};
<form onChange={handleInputChange}>
<ChildComponent
name={formFields.name}
sample_select={formFields.sample_select}
/>
</form>
子组件
<TextField
name="name"
id="name"
value={props.name}
/>
<TextField
select
id="sample_select"
name="sample_select"
value={props.sample_select}
>
<MenuItem value="1">1</MenuItem>
<MenuItem value="2">2</MenuItem>
<MenuItem value="3">3</MenuItem>
</TextField>
在 TextField 组件上有效,但在select组件中不会触发处理程序
顺便说一句,我使用Material UI
答案 0 :(得分:0)
我认为您应该使用“选择”组件来使其工作。 示例:
<Select
value={props.sample_select}
onChange={handleInputChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
答案 1 :(得分:0)
在父级中尝试此操作:
<form onChange={handleInputChange}>
<ChildComponent
name={formFields.name}
sample_select={formFields.sample_select}
handleInputChange={handleInputChange}
/>
</form>
在ChildComponent中:
<TextField
name="name"
id="name"
value={props.name}
onChange={props.handleInputChange}
/>
<TextField
select
id="sample_select"
name="sample_select"
value={props.sample_select}
onChange={props.handleInputChange}
>
<MenuItem value="1">1</MenuItem>
<MenuItem value="2">2</MenuItem>
<MenuItem value="3">3</MenuItem>
</TextField>
答案 2 :(得分:0)
知道了!尝试使用console.log(event)并看到事件类型。这是一个 click 事件,因此我放置了 onClick 处理程序,它可以正常工作! :D