javascript - HTML 输入不会在handleChange 上更新

Question

当我在输入上键入内容时，它们不会根据我正在键入的文本进行更新。如果我在所有表单上使用“this.state.value”，它们会同时使用相同的文本更新所有表单。

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';

export default class ContactArea extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            name: '',
            email: '',
            tel: '',
            company: '',
            msg: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

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

    }

    handleSubmit(event) {
        alert(this.state.value);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <div class="row">
                    <div class="col-lg-6 form-group">
                        <label class="label-width">
                            Nome:
                            <input class="form-control" type="text" value={this.state.name} onChange={this.handleChange} />
                        </label>
                    </div>
                    <div class="col-lg-6 form-group">
                        <label class="label-width">
                            Email:
                            <input class="form-control" type="text" value={this.state.email} onChange={this.handleChange} />
                        </label>
                    </div>
                    <div class="col-lg-6 form-group">
                        <label class="label-width">
                            Telefone:
                            <input class="form-control" type="text" value={this.state.tel} onChange={this.handleChange} />
                        </label>
                    </div>
                    <div class="col-lg-6 form-group">
                        <label class="label-width">
                            Empresa:
                            <input class="form-control" type="text" value={this.state.company} onChange={this.handleChange} />
                        </label>
                    </div>
                    <div class="col-lg-12 form-group">
                        <label class="label-width">
                            Mensagem:
                            <textarea class="form-control" type="text" value={this.state.msg} onChange={this.handleChange} />
                        </label>
                    </div>
                    <div class="col-lg-12">
                        <input type="submit" value="submit" class="btn btn-primary button-width button-spacing" />
                    </div>
                </div>
            </form>
        );
    }

}

Answer 1

现在您正在清除原始状态并只是设置值。试试这个吧

handleChange(event, type) {
    const newState = {};
    newState[type] = event.target.value;
    this.setState(newState);
}

以及每个项目的 JSX

<input class="form-control" type="text" value={this.state.name} onChange={this.handleChange.bind(this, 'name')} />

第二个参数'name'将被传递给handleChange，它只会更新当前状态下的name

或者，您可以为每个字段handleNameChange、handleEmailChange等创建一个函数。然后仅更新与该字段相关的状态部分

handleNameChange(event) {
    this.setState({ name: event.target.value });
}

handleEmailChange(event) {
    this.setState({ email: event.target.value });
}

...