如何从功能组件 React 中的 react-select 获取值

Question

我第一次在表单中使用 react-select。我在从 select 输入获取值并通过 Axios 将其发送到后端时遇到问题。


const options=[
  { value: 'Telecomms', label: 'Telecomms' },
  { value: 'Construction', label: 'Construction' },
  { value: 'Manufacturing', label: 'Manufacturing' },
]
function Register(props) {
  
  const [newUser,getUser]=useState({
      name: "",
      businessSector:"",
     
  })

  const dispatch = useDispatch()

// onChange handler
  const changeHandle=e=>{
  
    getUser({
      ...newUser,
      [e.target.name]:e.target.value

    })
  }

  const SubmitHandle=e=>{

    e.preventDefault()
    console.log(newUser)
   
    if (newUser) {
        dispatch(registerUser(newUser))
       
    }
  
  }


 return (
    <FormDialog
      loading={isLoading}
      onClose={onClose}
      open
      headline="Registration"
      onFormSubmit={SubmitHandle }
      hideBackdrop
      hasCloseIcon
      content={
        <Fragment>
          <Grid Container spacing={20}>
          <TextField
            variant="outlined"
            margin="normal"
            name="name"
            value={newUser.name}
            onChange={changeHandle}
            required
            fullWidth
           
            label="Full name"
            autoFocus
            autoComplete="off"
            type="text"
            InputProps={{
              className: classes.input
            }}
            FormHelperTextProps={{ error: true }}
          />
          
           <InputLabel id="demo-simple-select-label">Business Sector</InputLabel>
         <Select
         value={newUser.businessSector} 
         onInputChange={changeHandle}
          options={options}
          name="businessSector"
          />

任何时候我尝试 select 一个选项都会出现以下错误

Type error: cannot read property 'name' of undefined

我想知道到底哪里出错了。如果我尝试从开发工具检查状态，它不会在状态上注册。

Answer 1

错误 Type error: cannot read property 'name' of undefined 是由于在您的 changeHandler 中使用了 [e.target.name]。您为此使用了错误的 prop/callback；而不是 onInputChange 使用 onChange:

  const onChangeHandler = (change) => {
    getUser({
      ...newUser,
      businessSector: change
    });
  };

 return (
      <Select
        value={newUser.businessSector}
        onChange={onChangeHandler}
        options={options}
      />
 );

onInputChange 用于输入更改时，因此如果您使用 isSearchable 道具，您将能够在 Select 输入中键入并发送事件e 你期望得到，但因为它只是一个 select 它 returns 而不是一个空字符串。

如何从功能组件 React 中的 react-select 获取值

How to get value from react-select in a functional component React

reactjs

react-select