如何使用ReactJS获取输入字段的值？

您的错误是因为使用了class，而在使用class时我们需要绑定函数以便它能够正常工作。无论如何，有很多教程解释了为什么我们应该使用“this”，以及在JavaScript中“this”是什么。

如果您更正提交按钮，它应该可以正常工作：

<button type="button" onClick={this.onSubmit.bind(this)} className="btn">Save</button>

同时，如果你想在控制台中显示该输入框的值，你应该使用 var title = this.title.value;

最简单的方法是使用箭头函数

使用箭头函数改写后的代码

export default class MyComponent extends React.Component {

onSubmit = (e) => {
    e.preventDefault();
    var title = this.title;
    console.log(title);
}

render(){
    return (
        ...
        <form className="form-horizontal">
            ...
            <input type="text" className="form-control" ref={(c) => this.title = c} name="title" />
            ...
        </form>
        ...
        <button type="button" onClick={this.onSubmit} className="btn">Save</button>
        ...
    );
}

};

// On the state
constructor() {
  this.state = {
   email: ''
 }
}

// Input view ( always check if property is available in state {this.state.email ? this.state.email : ''}

<Input 
  value={this.state.email ? this.state.email : ''} 
  onChange={event => this.setState({ email: event.target.value)}
  type="text" 
  name="emailAddress" 
  placeholder="johdoe@somewhere.com" />

您可以在不添加“onChange”函数的情况下获取输入值。

只需将“ref属性”添加到输入元素中：

如果您使用类组件，则只需要3个步骤-首先，您需要声明输入字段的状态，例如this.state = {name:''}。其次，您需要编写一个函数来设置状态，当它在下面的示例中更改时，它是setName()，最后您必须编写输入jsx，例如< input value={this.name} onChange = {this.setName}/>

import React, { Component } from 'react'

export class InputComponents extends Component {
    constructor(props) {
        super(props)

        this.state = {
             name:'',
             agree:false
        }
        this.setName = this.setName.bind(this);
        this.setAgree=this.setAgree.bind(this);
    }

    setName(e){
        e.preventDefault();
        console.log(e.target.value);
        this.setState({
            name:e.target.value
        })
    }
    setAgree(){
        this.setState({
            agree: !this.state.agree
        }, function (){
            console.log(this.state.agree);
        })
    }
    render() {
        return (
            <div>
                <input type="checkbox" checked={this.state.agree} onChange={this.setAgree}></input>
                < input value={this.state.name} onChange = {this.setName}/>
            </div>
        )
    }
}

export default InputComponents

export default class MyComponent extends React.Component {

onSubmit(e) {
    e.preventDefault();
    var title = this.title.value; //added .value
    console.log(title);
}

render(){
    return (
        ...
        <form className="form-horizontal">
            ...
            <input type="text" className="form-control" ref={input => this.title = input} name="title" />
            ...
        </form>
        ...
        <button type="button" onClick={this.onSubmit} className="btn">Save</button>
        ...
    );
}

};

console.log(this.refs.title.value)

另外，您应该在 this.onSubmit 中添加 .bind(this)

（这在我的情况下起作用，我的情况相当类似，但是我使用的是 onSubmit={...} 而不是 onClick，并且它被放置在表单中（<form onSubmit={...} ></form>））

使用未受控制的字段：

export default class MyComponent extends React.Component {

    onSubmit(e) {
        e.preventDefault();
        console.log(e.target.neededField.value);
    }

    render(){
        return (
            ...
            <form onSubmit={this.onSubmit} className="form-horizontal">
                ...
                <input type="text" name="neededField" className="form-control" ref={(c) => this.title = c}/>
                ...
            </form>
            ...
            <button type="button" className="btn">Save</button>
            ...
        );
    }

};