Question

import React from 'react'

export default class form extends React.Component{
/// Handle Submit 
handleSubmit(e){
e.preventDefault();
}
/// handle patientname
handlePatientName(e) {
    this.setState({
        patientname: e.target.value
    })
}
// handle patient disease
handlePatientDisease(e){
    this.setState({
        patientdisease: e.target.value
    })
}
    // handle patient present illness
    handlePatientPresentIllness(e){
    this.setState({
        patientpresentillness: e.target.value
    })
}


render () {
    return (
<form> 
    <ul>
        <li>
            <label> Patient Name</label>
            <input type="text" name="patientname" placeholder="nome do paciente"  OnChange={this.handlePatientName} />

        </li>
        <li>
            <label> Patient Disease 
            <input type="text" name="patientdisease" placeholder="disease"/>
            </label>
        </li>
        <li>
            <label> Histórico 
            <input type="text" name="patientpresentillness" placeholder="historia do paciente"/>
            </label>
        </li>


        <li>
            <button type="button" onClick={this.handleSubmit}> Submit </button>
        </li>
    </ul>

</form>
           );
   }
}

目标：从此表单获取数据并将其显示在其他页面中（Sidebar.js）因此，在以该表单提交这些信息之后，我想使用SetState获取这些信息并仅在列表中显示患者名称。我如何使用SetState？

Answer 1

首先，您的代码有几个问题：

使用onChange代替OnChange：

<input type="text" onChange={this.handlePatientName} />

您的事件处理程序未绑定到类实例，因此回调中将this未定义，this.setState()将失败。您可以使用.bind(this)：
解决此问题
```
onChange={this.handlePatientName.bind(this)}
```
或者通过绑定构造函数中的处理程序：
```
constructor(){
    this.handlePatientName = this.handlePatientName.bind(this);
}
```
或者使用class properties并将处理程序定义为箭头函数：
```
handlePatientName = (e) => {    }
```
您应该为您的组件Form或form以外的其他人命名，因为form是used for the HTML form element。

完成所有操作后，您仍然没有将表单状态暴露给＆＃34;其他页面＆＃34;。要做到这一点，你应该提供回调道具来传递组件外的数据：

handlePatientName = (e) => {
    let patientName = e.target.value;
    this.setState({ patientName });
    this.props.onPatientNameChange(patientName);
}

现在，您可以从父页面捕获更改：

class Parent extends React.Component {
    handlePatientNameChange = (patientName) => {
        console.log("Patient name changed to:", patientName);
    }
    render() {
        return (
            <Form onPatientNameChange={this.handlePatientNameChange} />
        );
    }
}

如何在表单中提交一些信息后使用SetState获取数据？

1 个答案: