onChange 时 React Select 不触发

Question

我正在尝试使用事件 onChange 访问 Select 的值，以便我可以更新另一个 Select，但 Select 不会触发 onChange。你可以在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);

知道问题出在哪里吗？

谢谢

Answer 1

你需要调用像onSubmit={() => handleSubmit(onSubmit)}这样的函数。 在您当前的代码中，一旦组件被渲染，handleSubmit 就会被调用，因为您像这样直接调用它handleSubmit(onSubmit)

最终输出：

Sandbox Link

我还编辑了 <SpecialInput/> 组件来处理输入。

可能的修复：

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);