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')} />

第二个参数＆＃39; name＆＃39;将传递给handleChange，它将仅更新当前状态的名称

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

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

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

...

Answer 2

你遇到麻烦的原因是因为你现在正在做的是每次输入一个角色你最终会在你的状态对象上创建一个新的value属性，这不是你想要的因为它总是最多只包含一个字符，即你输入的最后一个字符，以及你的输入即使是这个单字符也不会更新的原因是因为你没有在任何一个字符中引用this.state.value您的输入，也不应该，因为这是不正确的。

（因为像这样的音符设置状态不会影响您的其他状态属性。）

所以我建议你解决这个问题的方法如下：

为每个输入添加name属性

<input class="form-control" type="text" name="name" value={this.state.name} onChange={this.handleChange} />
<input class="form-control" type="text" name="email" value={this.state.email} onChange={this.handleChange} />
<input class="form-control" type="text" name="tel" value={this.state.tel} onChange={this.handleChange} />
<input class="form-control" type="text" name="company" value={this.state.company} onChange={this.handleChange} />
<textarea class="form-control" type="text" name="msg" value={this.state.msg} onChange={this.handleChange} />

然后按如下方式修改handleChange：

handleChange(event) {
  this.setState({ [e.target.name]: e.target.value });
}

方括号是ES6的一项功能，称为计算属性

在handleChange上没有更新HTML输入

2 个答案: