我将如何在 react js 中获取文本框值

Question

我有以下代码，我想获取在用户名和密码文本框中输入的值并将它们发送到节点 js 服务。但我不知道该怎么做。

事情是没有任何工作。我只能呈现页面，但功能不起作用，也无法从文本框中获取值。我对反应很陌生。

import { FormGroup} from "react-bootstrap";
import "./Login.css"
import "bootstrap/dist/css/bootstrap.min.css"

class LoginClassComponent extends React.Component {
    constructor(props) {
        super(props);
        console.log(props);
        this.state = {
            username: '',
            password: ''
        }

        this.handleTextChange = this.handleTextChange.bind(this);
        this.handleValidation = this.handleValidation.bind(this);
    }

    handleTextChange = (event) => {
        this.setState({ userName: event.target.value });
        this.setState({ password: event.target.value });
      }

    handleValidation = (event) => {
    console.log(this.props.userName);
        if (!this.state.username) {
            this.setState({ error: 'Please enter User Name' });
            event.preventDefault();
        }
        else if (!this.state.password) {
            this.setState({ error: 'Please enter Password' });
            event.preventDefault();
        }
        else {
            this.setState({ error: "" });
        }
    }

    render() {
        const {username, password} = this.props;
        return (
            <div className="Login">
                <form >
                    <FormGroup controlId="email" bsSize="large">
                        <label htmlFor="exampleInputUserName"><b>User Name</b></label>
                        <input type="username" className="form-control" id="exampleInputUserName" value={this.props.userName} onChange={this.handleTextChange} placeholder="Enter User Name"></input>
                        <div><br></br></div>
                    </FormGroup>
                    <FormGroup controlId="password" bsSize="large">
                        <label htmlFor="exampleInputPassword"><b>Password</b></label>
                        <input type="password" className="form-control" id="exampleInputPassword"  value={this.props.password} onChange={this.handleTextChange} placeholder="Enter Password"></input>
                        <div><br></br></div>
                    </FormGroup>
                    <button type="submit" onClick={this.handleValidation} className="btn btn-info">Login</button>
        &nbsp;&nbsp;&nbsp;
        <button type="submit" className="btn btn-danger">Cancel</button>
                    <div><br></br></div>
                    <div id="errorDiv">
                        {(this.state.error !== '') ? <span style={{ color: "red" }}>{this.state.error}</span> : ''}
                    </div>
                </form>
            </div>
        )
    }
}

export default LoginClassComponent;

Answer 1

您可以通过两种方式解决您的问题：

首先，您可以创建 2 个单独的 onChange 方法来更新您的用户名/密码状态

或者，甚至更好：在表单输入中添加名称标签：

name = userName

在您的用户名输入和

name = password

用于密码输入。

然后制作一个在onChange事件后触发的方法

function example(e){
   this.setState({
   [e.target.name] : [e.target.value]
  })
}

确保您的用户名和密码表单的名称与您所在州的属性相同。