从子下拉列表中获取价值

Question

我正在尝试从我创建的子组件的 react-hook-form 中使用函数 getValues 获取值（请记住，这是一个示例，并且有一些以这种方式创建组件的逻辑） .当我单击“打印值”时，它没有获得 authorId 的值。有什么想法吗？

这是两个组件：

const { register, control, getValues } = useForm();

<Button
  onClick={() => {
    console.log(getValues());
  }}
>
  Print Values
</Button>

<FormControl variant="outlined">
  <InputLabel>Author</InputLabel>
  <Controller
    {...register}
    control={control}
    name="authorId"
    render={({ field }) => (
      <CustomDropdown control={control} category="Author" field={field} />
    )}
  />
</FormControl>

CustomDropdown.js

const CustomDropdown = ({ field }) => {
  const [selectedValues, setSelectedValues] = React.useState("");

  <Select
    {...field}
    value={selectedValues || ""}
    onChange={(e) => {
      setSelectedValues(e.target.value);
    }}
  >
    return <MenuItem key="1" value="1">
      Option 1
    </MenuItem>
    <MenuItem key="2" value="2">
      Option 2
    </MenuItem>
  </Select>;
};

Answer 1

有几件事。首先，需要使用输入的名称调用register 方法。 在控制器组件中，您没有调用 register

<Controller
  {...register}

改为：

<Controller
  {...register("authorId")}

另外，您没有使用useForm 挂钩来控制CustomDropdown 组件的值。

而是使用 useForm 钩子不知道的自己的反应状态来控制值

const [selectedValues, setSelectedValues] = React.useState("");
// ...
onChange={(e) => { setSelectedValues(e.target.value) }}

一种解决方案是将setValue 方法和value 作为属性传递给CustomDropdown 组件。

第一个文件

const { register, control, getValues, setValue } = useForm();

const setAuthorIdValue = (value) => setValue("authorId", value);

<Button
  onClick={() => {
    console.log(getValues());
  }}
>
  Print Values
</Button>

<FormControl variant="outlined">
  <InputLabel>Author</InputLabel>
  <Controller
    {...register("authorId")}
    control={control}
    name="authorId"
    render={({ field }) => (
      <CustomDropdown
        control={control}
        category="Author"
        field={field}
        value={getValues("authorId")}
        setValue={setAuthorIdValue}
      />
    )}
  />
</FormControl>

CustomDropdown.js

const CustomDropdown = ({ field, value, setValue }) => {
  return <Select
    {...field}
    value={value || ""}
    onChange={(e) => {
      setValue(e.target.value);
    }}
  >
    return <MenuItem key="1" value="1">
      Option 1
    </MenuItem>
    <MenuItem key="2" value="2">
      Option 2
    </MenuItem>
  </Select>;
};

Answer 2

如果你只需要输出你应该使用当前范围的值

const CustomDropdown = () => {
  const [selectedValues, setSelectedValues] = useState("value 1");
  return (
    <>
    <button onClick={()=>console.log(selectedValues)}> Get value </button>
    <select 
      value={selectedValues}
      onChange={e => setSelectedValues(e.target.value)}>
        <option value="value 1"> Value 1</option>
        <option value="value 2"> Value 2</option>
        <option value="value 3"> Value 3</option>
      </select>
    </>
  )
} 

如果您需要该值用于其他目的，请使用 the Context Hook

编辑： 使用上下文挂钩将值从子级传递给父级的示例。在您的情况下，您需要像这样在 App.js 中定义 useState：

App.js

import { createContext, useState } from 'react';
import './App.css';
import Child from './Child.js'

export const MyContext = createContext("N0thing")

function App() {
  const [getValue, changeValue] = useState(0)
  return (
    <div className="App">
      <header className="App-header">
      <MyContext.Provider value={{getValue, changeValue}}>
          <Child/>
      </MyContext.Provider>
          Renderd by Parent {getValue}
      </header>
    </div>
  );
}

export default App;

Child.js

import {useContext} from 'react'
import {MyContext} from './App.js'

const Child = () => {
    const myContext = useContext(MyContext)
    return (
        <>
        Renderd by Child {myContext.getValue}
        <button onClick={()=>myContext.changeValue(myContext.getValue + 1)}> Change value from Child Componet </button>    
        </>
    )
}
 export default Child;

我希望我正确地理解了你，并且这对你有帮助。