react-hook-form：无法在 'HTMLInputElement' 上设置 'value' 属性

Question

我正在尝试使用 React Hook 表单让用户输入上传文件

import "./styles.css";
import { useForm, Controller } from "react-hook-form";
import {
  Col,
  Row,
  Form,
  FormGroup,
  InputGroup,
  Input,
  Container,
  Button
} from "reactstrap";

export default function App() {
  const onSubmit = (data) => {
    console.log(data);
  };

  const { control, handleSubmit } = useForm();

  return (
    <Container>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <Row className="m-3">
          <Col>
            <FormGroup row className="mr-md-1">
              <InputGroup className="mb-3">
                <Controller
                  name="itemlist2"
                  control={control}
                  render={({ field: { ref, ...field } }) => (
                    <Input
                      {...field}
                      type="file"
                      required
                      innerRef={ref}
                      onChange={(e) => {
                        field.onChange(e.target.files);
                      }}
                    />
                  )}
                />
              </InputGroup>
            </FormGroup>
          </Col>
        </Row>
        <Button color="primary" className="mr-1">
          {"Save Changes"}
        </Button>
      </Form>
    </Container>
  );
}

检查 https://codesandbox.io/s/affectionate-moon-dmn8q

我明白了

Answer 1

我对 reactstrap 不是很熟悉，但我认为你必须省略 value 属性，它是 field 的一部分。您不能设置 value 输入 type="file"。查看此 answer 了解更多信息。

<Controller
  name="itemlist2"
  control={control}
  render={({ field: { value, ...field } }) => (
    <Input
      {...field}
      type="file"
      required
      innerRef={field.ref}
      onChange={(e) => {
        field.onChange(e.target.files);
      }}
    />
  )}
/>

Answer 2

问题是由于您使用的是受控输入，而不是传递值以在 onSubmit 上呈现出来。

使用 { field: { value, ...field } } 作为 render 方法的属性，它会在 'HTMLInputElement' 上设置 'value' 属性否则它只会传递一个有冲突的空字符串带有文件类型数据。应该是这样的 <input type="file" value="c:/js.txt"/> 但你却这样做 <input type="file"/>

完整代码：

import "./styles.css";
import { useForm, Controller } from "react-hook-form";
import {
  Col,
  Row,
  Form,
  FormGroup,
  InputGroup,
  Input,
  Container,
  Button
} from "reactstrap";

export default function App() {
  const onSubmit = (data) => {
    console.log(data);
  };

  const { control, handleSubmit } = useForm();

  return (
    <Container>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <Row className="m-3">
          <Col>
            <FormGroup row className="mr-md-1">
              <InputGroup className="mb-3">
                <Controller
                  name="itemlist2"
                  control={control}
                  render={({ field: { value, ...field } }) => (
                    <Input
                      {...field}
                      type="file"
                      required
                      innerRef={field.ref}
                      onChange={(e) => {
                        field.onChange(e.target.files);
                      }}
                    />
                  )}
                />
              </InputGroup>
            </FormGroup>
          </Col>
        </Row>
        <Button color="primary" className="mr-1">
          {"Save Changes"}
        </Button>
      </Form>
    </Container>
  );
}

react-hook-form：无法在 'HTMLInputElement' 上设置 'value' 属性

react-hook-form: Failed to set the 'value' property on 'HTMLInputElement'

react-hook-form