Question

我是新来的反应js。

我的表单中有几个输入，并考虑React中的可控输入方法，我正在尝试使用一个事件处理程序来处理所有其他输入。我在堆栈溢出中引用了一些参考文献。仍然无法弄清楚为什么我无法在输入框内写字。

这是我的代码。

import React, {Component} from 'react';
import { Grid, Row, Col , Button } from 'react-bootstrap';

class ContactForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: '' ,
      email: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return (
      <form>
          <input name="input1"  value={this.state.name}  onChange={this.handleChange}/>
          <input name="input2" value={this.state.email} onChange={this.handleChange} />
          <p>{this.state.name}, {this.state.email}</p>
      </form>
    );
  }
}


export default ContactForm;

Answer 1

您正在使用name属性来识别输入，但是您在渲染函数中读取了错误的值，“name”和“email”而不是“input1”和“input2”

您可以这样做：

<input name="input1"  value={this.state.input1}  onChange={this.handleChange}/>
<input name="input2" value={this.state.input2} onChange={this.handleChange} />

或

<input name="name"  value={this.state.name}  onChange={this.handleChange}/>
<input name="email" value={this.state.email} onChange={this.handleChange} />

你还必须改变这个：

this.state = {
  name: '' ,
  email: ''
};

如果您使用第一个选项，请在构造函数中

。

Answer 2

我会用ref来实现这个目标：

handleChange(e) {
      const {input1, input2} = this.refs;
      //do what ever you want with the values

  }

  render() {
    return (
      <form>
          <input name="input1"  value={this.state.name} ref="input1" />
          <input name="input2" value={this.state.email} ref="input2" onChange={this.handleChange} />
          <p>{this.state.name}, {this.state.email}</p>
      </form>
    );
  }
}

另外，我会使用提交按钮或类似的东西，而不是一个或两个输入上的事件监听器

如何将一个事件处理程序附加到React JS中的不同输入？

2 个答案: