当 onChange 时 React Select 不会触发

Question

I am trying to access the value of a Select with the event onChange so I can update another Select, but the Select doesn't trigger onChange. You can find the code in codesandbox :

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { useForm, Controller } from "react-hook-form";
import {
  FormControl,
  Select,
  MenuItem,
  InputLabel,
  FormHelperText
} from "@material-ui/core";

function App() {
  const { handleSubmit, errors, control } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };
  const [test, setTest] = useState(0);
  const handleChange = (stateFunction, event) => {
    if (event) {
      console.log(event);
      setTest(event.target.value);
    }
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <FormControl variant="outlined" required>
        <InputLabel>Test</InputLabel>
        <Controller
          as={
            <Select width={"300px"} onChange={handleChange(setTest, this)}>
              <MenuItem value="1">One</MenuItem>
              <MenuItem value="2">Two</MenuItem>
              <MenuItem value="3">Three</MenuItem>
            </Select>
          }
          control={control}
          defaultValue="1"
          name="brandId"
          rules={{ required: "Marca es requerido" }}
        />
        <FormHelperText error={true}>
          {errors.brand && errors.brand.message}
        </FormHelperText>
      </FormControl>

      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Any idea where the problem is?

Thanks

Answer 1

you need to call function like onSubmit={() => handleSubmit(onSubmit)} . In your current code, handleSubmit is called as soon as the component is rendered because you called it directly like this handleSubmit(onSubmit)

Final Output:

Sandbox Link

I have also edited the <SpecialInput/> component to handle input.

Possible fix:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { useForm, Controller } from "react-hook-form";
import {
  FormControl,
  // SelectField,
  MenuItem,
  Select,
  InputLabel,
  FormHelperText
} from "@material-ui/core";
import SpecialInput from "./SpecialInput";
function App() {
  const { handleSubmit, errors, control } = useForm();
  const onSubmit = (data) => {
    console.log("hi");
  };
  const [test, setTest] = useState(0);
  const [selectedItem, setItem] = useState(1);
  const handleChange = (stateFunction, event) => {
    if (event) {
      event.preventDefault();
      console.log("hi");
      // setTest(event.target.value);
      console.log("test:", test);
    }
  };

  const onTextChange = (event) => {
    setTest(event.target.value);
  };

  return (
    <form onSubmit={(event) => handleChange(onSubmit, event)}>
      <FormControl variant="outlined" required>
        <InputLabel>Test</InputLabel>
       
        <Controller
          render={(props) => (
            <Select
              value={selectedItem}
              onChange={(event) => setItem(event.target.value)}
            >
              <MenuItem value="1">One</MenuItem>
              <MenuItem value="2">Two</MenuItem>
              <MenuItem value="3">Three</MenuItem>
            </Select>
          )}
          control={control}
          defaultValue="1"
          name="brandId"
          rules={{ required: "Marca es requerido" }}
        />
        <FormHelperText error={true}>
          {errors.brand && errors.brand.message}
        </FormHelperText>
      </FormControl>
      <SpecialInput handleChange={onTextChange} test={test} />
      <input type="submit" />
      <h1>{`Test Value: ${test}`}</h1>
      <h1>{`Select Value: ${selectedItem}`}</h1>
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);