任何帮助/指针表示赞赏
我正在尝试使用 react hook form controller for materialui select 找出 onChange 事件,但我无法弄清楚如何在选择更改以调用 handleChange 事件时触发该事件我已经创建了一个沙箱来复制我也有单独的警告问题:findDOMNode在 StrictMode 中已弃用,我无法理解如何使用 createRef 来阻止这种情况,但主要问题是 onChange 事件,因为我需要根据 Select-value 呈现不同的进一步 TextField。
https://codesandbox.io/s/react-hook-form-select-onchange-uiic6
<form onSubmit={handleSubmit(onSubmit)}>
<Grid container direction="column" spacing={2}>
<Grid item>
<FormControl fullWidth variant="outlined" className={classes.formControl}>
<InputLabel id="demo-simple-select-label">Folder Name</InputLabel>
<Controller
control={control}
name="folderSelect"
onChange={handleChange}
defaultValue=""
render={({onChange, value, onBlur, name}) => (
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
onChange={onChange}
value={value ? value : ''}
name={name}>
<MenuItem value="Invoices" key="Invoices">
Invoices
</MenuItem>
<MenuItem value="Statements" key="Statements">
Statements
</MenuItem>
<MenuItem value="Credits" key="Credits">
Credits
</MenuItem>
</Select>
)}
/>
</FormControl>
</Grid>
<Grid item>
<TextField
fullWidth
label="First Name"
name="firstName"
variant="outlined"
onChange={(e) => console.log(e.target.value)}
inputRef={register({required: true})}
/>
</Grid>
<Button type="submit">Submit</Button>
</Grid>
</form>;
最佳答案
您在代码中定义的 onChange
没有 Controller
方法。所以你可以删除它:
<Controller
control={control}
name="folderSelect"
onChange={() => console.log("hellow")} <- this one not required
defaultValue=""
我对您的问题的理解是,您希望在 handleChange
值更新后立即触发 select
。为此,您可以这样做: <Select
labelId="demo-simple-select-label"
id="demo-simple-select"
onChange={(e) => {
onChange(e)
handleChange(e) <- call handleChange
}}
value={value ? value : ""}
name={name}
>
这是代码和演示:https://codesandbox.io/s/react-hook-form-select-onchange-forked-eqb20?file=/src/App.js:1533-1907
关于reactjs - React Hook Form onChange 选择 Materialui,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64220961/