Question

我已经制作了组件。我要在组件中使用Forms-validation（react-bootstrap）。当我在组件中制作此表单时，出现类似以下错误：

'render'未定义为no-undef'

代码：

import react, {Component} from 'react';

export defaults class Test extends Component {
  constructor(props) {
    super(props)
    this.state = {....}
  }

   render() {
     return(
       <div></div>
     )
   }
}

function FormExample() {
  const [validated, setValidated] = useState(false);

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }

    setValidated(true);
  };

return(
  <Form noValidate validated={validated} onSubmit={handleSubmit}>
  ....
  </Form>
 );

 render(<FormExample />);
}

https://react-bootstrap.github.io/components/forms/#forms-validation

这是我使用的表单验证。

请提出任何建议：

Answer 1

您已将functional component用于FormExample，而functional component不使用render函数，class component支持render函数。 Functional component使用的返回语句类似于渲染。因此，请从FormExample中删除以下行。

render(<FormExample />);

以下是移除渲染后的代码：

function FormExample() {
  const [validated, setValidated] = useState(false);

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }

    setValidated(true);
  };

return(
  <Form noValidate validated={validated} onSubmit={handleSubmit}>
  ....
  </Form>
 );
}

在React中未定义'render'no-undef

1 个答案: