reactjs - 无法获取 React Form 值

Question

我使用 react-semantic 创建了一个表单，然后尝试通过 json 在数据库中解析字段。但我无法获得价值。我的表单代码是：

 class FormPatient extends Component {
      state = {}

      constructor(props) {
        super(props);
        this.state = {
          patient: {
            firstName: '',
            lastName: '' } }}

      onFirstNameChange = (event) => {
        this.setState({firstName: event.target.value});  }

      onLastNameChange = (event) => {
        this.setState({lastName: event.target.value});}

      onSubmit = () => {
        console.log(this.state);
        fetch('http://localhost:3000/', {
          method: 'post',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            firstName: this.state.firstName,
            lastName: this.state.lastName })})
        .then(response => response.json())
         .then(patient => {
           if (patient) {
              console.log(patient);
              this.props.loadPatient(this.state.patient)  }}) }

     render() {
        const { value } = this.state
        return ( 
            <Form>
              <Form.Group widths='equal'>
                <Form.Field 
                  control={Input} 
                  label='First name' 
                  placeholder='First name' 
                  onChange={this.onFirstNameChange}/>
                <Form.Field 
                  control={Input} 
                  label='Last name' 
                  placeholder='Last name' 
                  onChange={this.onLastNameChange}/>
               </Form.Group>
           </Form>)}}

    export default FormPatient

第一个 console.log 获取值 -> {patient: {…}, firstName: "asg", lastName: "asgd"} 但获取后的第二个不能 -> {firstName: "", lastName: "" loadPatient 函数在 App 文件中。

 loadPatient = (data) => {
            this.setState({patient: {
              id: data.id,
              firstName: data.firstName,
              lastName: data.lastName,
              joined: data.joined}})}

标签： reactjsforms

Answer 1

它不起作用的原因是因为您在构造函数内部的状态中的患者对象内有 firstName 和 lastName 但您在 onSubmit 中像 this.state.firstName 和 this.state.lastName 一样访问，所以它不起作用。

此外，您没有将 onSubmit 道具传递给 Form，因此当您提交表单时， onSubmit 不会触发。

请尝试以下更新的代码

    class FormPatient extends Component {

      constructor(props) {
        super(props);
        this.state = {
            patient: {
                firstName: '',
                lastName: ''
            } 
        }
      }

      onFirstNameChange = (event) => {
        this.setState({patient: {
            firstName: event.target.value
           }
        });  
      }

      onLastNameChange = (event) => {
        this.setState({patient: {
            lastName: event.target.value
           }
        });
      }

      onSubmit = (event) => {
        console.log(this.state);
        event.preventDefault();
        fetch('http://localhost:3000/', {
          method: 'post',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            firstName: this.state.firstName,
            lastName: this.state.lastName })})
        .then(response => response.json())
         .then(patient => {
           if (patient) {
              console.log(patient);
              this.props.loadPatient(this.state.patient)  }}) }

     render() {
        const { value } = this.state
        return ( 
            <Form onSubmit={this.onSubmit}>
              <Form.Group widths='equal'>
                <Form.Field 
                  control={Input} 
                  label='First name' 
                  placeholder='First name' 
                  onChange={this.onFirstNameChange}/>
                <Form.Field 
                  control={Input} 
                  label='Last name' 
                  placeholder='Last name' 
                  onChange={this.onLastNameChange}/>
               </Form.Group>
           </Form>)}}

    export default FormPatient