我们可以在react hook表单中使用嵌套控制器吗?

Question

我试图在控制器内添加一个控制器。

我得到一个typescript lint错误

'onChange' is already declared in the upper scope.

我如何修复相同的?我有一个场景，我有一个单选按钮来选择我是否想看电影。如果选择是观看电影，我需要从自动完成中显示的选择列表中选择要观看的电影。我可以在不使用表单的情况下实现这一点，但我想使用react hook表单来实现这一点。

const isMovie = watch("isMovie", "WatchMovie");

<FormControl>
<Controller
control={control}
id="isMovie"
name="isMovie"
defaultValue={isMovie.toString()}
render={({ onChange }) => (
<RadioGroup
onChange={({ target: { value } }) => {
onChange(value);
}}
defaultValue="Watch Movie"
>
<FormControlLabel
value="WatchMovie"
control={<Radio color="primary" size="small" />}
label="Select Movie to watch"
/>
<Controller
control={control}
id="isMovie"
name="isMovie"
defaultValue={isMovie.toString()}
render={({ onChange }) => (
<Autocomplete
disablePortal
classes={{ root: classes.MuiFormControlLabel }}
options={(() => {
if (isMovie === "english")
return englishMovie;
if (isMovie === "Spanish")
return spanishMovie;
})()}
getOptionLabel={(option) => option.value.toString()}
renderInput={(params) => (
<TextField {...params} />
)}
onChange={({ target: { value } }) => {
onChange(value);
}}

/>
)}
/>
<FormControlLabel
value="donotwatchmovie"
control={<Radio color="primary" size="small" />}
label="Do Not watch a movie"
/>
</RadioGroup>
)}
/>
</FormControl>

Answer 1

将控制器上或控制器下的函数名更改为另一个

<Controller
control={control}
id="isMovie"
name="isMovie"
defaultValue={isMovie.toString()}
render={({ onChange: onRadioChange }) => ( // <=== here to change name
<RadioGroup
onChange={({ target: { value } }) => {
onRadioChange(value);
}}
defaultValue="Watch Movie"
>
<Controller
control={control}
id="isMovie"
name="isMovie"
defaultValue={isMovie.toString()}
render={({ onChange }) => ( // keep the original name, or reverse
<Autocomplete
disablePortal
classes={{ root: classes.MuiFormControlLabel }}
options={(() => {
if (isMovie === "english")
return englishMovie;
if (isMovie === "Spanish")
return spanishMovie;
})()}
getOptionLabel={(option) => option.value.toString()}
renderInput={(params) => (
<TextField {...params} />
)}
onChange={({ target: { value } }) => {
onChange(value);
}}
/>
)}
/>
</RadioGroup>

)}/在