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获取值-> {患者：{…}，名字：“ asg”，姓氏：“ asgd”} 但提取后的第二个不能-> {firstName：“”，lastName：“”} loadPatient函数位于App文件中。

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

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

无法获取反应形式值

1 个答案: