Question

我们正在尝试建立一个数据输入表单，以将输入添加到mongo中的对象。我们很肯定，这与前端有关，因为我们甚至无法获取输入数据来打印警报。

import { Panel, Button,ButtonToolbar} from 'react-bootstrap';

export default class ResearcherPortal extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            schoolName: '',
            studyName: '',
            studyDescription: '',
            identifier: '',
            numberOfConsenting: null,
            numberOfNonconsenting: null
        },

        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleSubmit(event){
        this.setState({numberOfConsenting: event.target.value});
        alert(this.state.numberOfConsenting);
    }
    render() {
        return (
            <div className="jumbotron">
                <div className="container ">
                    <div className ="row justify-content-md-center">
                        <Panel bsStyle="primary">
                            <Panel.Heading>
                                <h2>Researcher Portal</h2>
                            </Panel.Heading>
                            <Panel.Body>
                                <form id="Account Creation" action={"/researcherPortal"} method="POST">
                                    <div className="form-group">
                                        <input type="text" className="form-control" id="schoolName" placeholder="School Name"/>
                                    </div>
                                    <div className="form-group">
                                        <input type="text" className="form-control" id="studyName" placeholder="Study Name"/>
                                    </div>
                                    <div className="form-group">
                                        <input type="text" className="form-control" id="studyDescription" placeholder="Study Description"/>
                                    </div>
                                    <div className="form-group">
                                        <input type="text" className="form-control" id="identifier" placeholder="Unique Identifier"/>
                                    </div>
                                    <div className="form-group">
                                        <input type="text" className="form-control" id="numberOfConsenting" placeholder="Number of Consenting Students" value={this.state.numberOfConsenting}/>
                                    </div>
                                    <div className="form-group">
                                        <input type="text" className="form-control" id="numberOfNonconsenting" placeholder="Number of Nonconsenting Students"/>
                                    </div>
                                    <Button type="submit" className="btn btn-primary" onClick={this.handleSubmit.bind(this)}>Create Accounts</Button>
                                </form>
                            </Panel.Body>
                        </Panel>
                    </div>
                </div>
            </div>

        );
    }
}

期望的结果是“同意学生人数”的输入，但是我们只是输出初始构造函数值。

Answer 1

您需要向值为onChange的输入提供this.state.numberOfConsenting。像-

changeNumberOfConsenting(event) {
    this.setState({ numberOfConsenting: event.target.value });
}

...

<input ... value={this.state.numberOfConsenting} onChange={this.changeNumberOfConsenting} />

然后将其绑定到您的构造函数中，就像对handleSubmit所做的那样。

Answer 2

使用裁判。

将处理程序添加到构造函数：

this.consentingStudents = React.createRef();

为此参考添加所需的输入内容：

<input type="text" className="form-control" id="numberOfConsenting" placeholder="Number of Consenting Students" ref={this.consentingStudents} value={this.state.numberOfConsenting} />

并在handleSubmit（）中获取其值：

 handleSubmit(event) {
    this.setState({ numberOfConsenting: this.consentingStudents.current.value });
    alert(this.consentingStudents.current.value);
}

无法使用REACT将数据从表单添加到变量

2 个答案: