Javascript React.js：使用一个onChange处理程序识别不同的输入

想知道正确的方法是什么：

var Hello = React.createClass({
getInitialState: function() {
    return {total: 0, input1:0, input2:0};
},
render: function() {
    return (
        <div>{this.state.total}<br/>
            <input type="text" value={this.state.input1} onChange={this.handleChange} />
            <input type="text" value={this.state.input2} onChange={this.handleChange} />
        </div>
    );
},
handleChange: function(e){
    this.setState({ ??? : e.target.value});
    t = this.state.input1 + this.state.input2;
    this.setState({total: t});
}
});

React.renderComponent(<Hello />, document.getElementById('content'));

var Hello=React.createClass({
getInitialState:函数（）{
返回{total:0，input1:0，input2:0}；
},
render:function（）{
返回(
{this.state.total}

);
},
handleChange:函数（e）{
this.setState（{？？？：e.target.value}）；
t=this.state.input1+this.state.input2；
this.setState（{total:t}）；
}
});
React.renderComponent（，document.getElementById（'content'）；

---

显然，您可以创建单独的handleChange函数来处理每个不同的输入，但这不是很好。类似地，您可以仅为单个输入创建组件，但我想看看是否有这样的方法。

我建议坚持使用标准HTML属性，如on

input

元素来标识您的输入。此外，您不需要将“total”作为单独的值保留在状态中，因为它可以通过在您的状态中添加其他值来组合：

var Hello = React.createClass({
    getInitialState: function() {
        return {input1: 0, input2: 0};
    },
    render: function() {
        const total = this.state.input1 + this.state.input2;

        return (
            <div>{total}<br/>
                <input type="text" value={this.state.input1} name="input1" onChange={this.handleChange} />
                <input type="text" value={this.state.input2} name="input2" onChange={this.handleChange} />
            </div>
        );
    },
    handleChange: function(e) {
        this.setState({[e.target.name]: e.target.value});
    }
});

React.renderComponent(<Hello />, document.getElementById('content'));

var Hello=React.createClass({
getInitialState:函数（）{
返回{input1:0，input2:0}；
},
render:function（）{
const total=this.state.input1+this.state.input2；
返回(
{total}

);
},
handleChange:函数（e）{
this.setState（{[e.target.name]：e.target.value}）；
}
});
React.renderComponent（，document.getElementById（'content'）；

不推荐的解决方案

valueLink/checkedLink

来自core React，因为它让一些用户感到困惑。如果使用最新版本的React，则此答案无效。但是，如果您喜欢它，您可以通过创建自己的

Input

组件轻松地模拟它

旧答案内容： 使用React的双向数据绑定助手，您可以更轻松地实现想要实现的目标

var Hello = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function() {
        return {input1: 0, input2: 0};
    },

    render: function() {
        var total = this.state.input1 + this.state.input2;
        return (
            <div>{total}<br/>
                <input type="text" valueLink={this.linkState('input1')} />;
                <input type="text" valueLink={this.linkState('input2')} />;
            </div>
        );
    }

});

React.renderComponent(<Hello />, document.getElementById('content'));

var Hello=React.createClass({
mixin:[React.addons.LinkedStateMixin]，
getInitialState:函数（）{
返回{input1:0，input2:0}；
},
render:function（）{
var total=this.state.input1+this.state.input2；
返回(
{total}

;
;
);
}
});
React.renderComponent（，document.getElementById（'content'）；

简单，对吗

你甚至可以

@Vigril Disgr4ce

当涉及到多字段表单时，使用React的关键特性：组件是有意义的

在我的项目中，我创建了TextField组件，这些组件至少包含一个值属性，它负责处理输入文本字段的常见行为。这样，您就不必担心在更新值状态时跟踪字段名称

[...]

handleChange: function(event) {
  this.setState({value: event.target.value});
},
render: function() {
  var value = this.state.value;
  return <input type="text" value={value} onChange={this.handleChange} />;
}

[...]

[…]
handleChange:函数（事件）{
this.setState（{value:event.target.value}）；
},
render:function（）{
var值=this.state.value；
返回；
}
[...]

您可以使用

.bind

方法将参数预构建到

handleChange

方法。 可能是这样的：

  var Hello = React.createClass({
    getInitialState: function() {
        return {input1:0, 
                input2:0};
    },
    render: function() {
      var total = this.state.input1 + this.state.input2;
      return (
        <div>{total}<br/>
          <input type="text" value={this.state.input1} 
                             onChange={this.handleChange.bind(this, 'input1')} />
          <input type="text" value={this.state.input2} 
                             onChange={this.handleChange.bind(this, 'input2')} />
        </div>
      );
    },
    handleChange: function (name, e) {
      var change = {};
      change[name] = e.target.value;
      this.setState(change);
    }
  });

  React.renderComponent(<Hello />, document.getElementById('content'));

var Hello=React.createClass({
getInitialState:函数（）{
返回{input1:0，
输入2:0}；
},
render:function（）{
var total=this.state.input1+this.state.input2；
返回(
{total}

);
},
handleChange:函数（名称，e）{
var-change={}；
更改[名称]=e.target.value；
本.设置状态（变更）；
}
});
React.renderComponent（，document.getElementById（'content'）；

---

（我还建议在渲染时计算

total

。

您可以使用名为

ref

的特殊

React

属性，然后使用

React

的

getDOMNode（）

函数匹配

onChange

事件中的真实DOM节点：

handleClick: function(event) {
  if (event.target === this.refs.prev.getDOMNode()) {
    ...
  }
}

render: function() {
  ...
  <button ref="prev" onClick={this.handleClick}>Previous question</button>
  <button ref="next" onClick={this.handleClick}>Next question</button>
  ...
}

handleClick:函数（事件）{
if（event.target==this.refs.prev.getDOMNode（））{
...
}
}
render:function（）{
...
上一个问题
下一个问题
...
}

Hi已改进答案。您不需要绑定函数，因为您可以在不使用它的情况下访问输入

var Hello = React.createClass({
    render: function() {
        var total = this.state.input1 + this.state.input2;
        return (
             <div>{total}<br/>
                  <input type="text" 
                    value={this.state.input1}
                    id="input1"  
                    onChange={this.handleChange} />
                 <input type="text" 
                    value={this.state.input2}
                    id="input2" 
                    onChange={this.handleChange} />
            </div>
       );
   },
   handleChange: function (name, value) {
       var change = {};
       change[name] = value;
       this.setState(change);
   }
});

React.renderComponent(<Hello />, document.getElementById('content'));

var Hello=React.createClass({
render:function（）{
var total=this.state.input1+this.state.input2；
返回(
{total}

);
},
handleChange:函数（名称、值）{
var-change={}；
更改[名称]=值；
本.设置状态（变更）；
}
});
React.renderComponent（，document.getElementById（'content'）；

onChange

事件气泡。。。所以你可以这样做：

// A sample form
render () {
  <form onChange={setField}>
    <input name="input1" />
    <input name="input2" />
  </form>
}

我在几个应用程序中使用了类似的东西，非常方便。
您可以通过创建一个单独的
InputField
组件来跟踪每个子
输入的值，该组件管理单个
输入的值。例如，
InputField
可以是：

var InputField = React.createClass({
  getInitialState: function () {
    return({text: this.props.text})
  },
  onChangeHandler: function (event) {
     this.setState({text: event.target.value})
  }, 
  render: function () {
    return (<input onChange={this.onChangeHandler} value={this.state.text} />)
  }
})

var InputField=React.createClass({
getInitialState:函数（）{
返回（{text:this.props.text}）
},
onChangeHandler:函数（事件）{
this.setState（{text:event.target.value}）
}, 
渲染：函数（）{
返回（）
}
})

现在，可以在此
InputField
组件的单独实例中跟踪每个
输入的值，而无需在父级状态下创建单独的值来监视每个子组件。
您也可以这样做：

...
constructor() {
    super();
    this.state = { input1: 0, input2: 0 };
    this.handleChange = this.handleChange.bind(this);
}

handleChange(input, value) {
    this.setState({
        [input]: value
    })
}

render() {
    const total = this.state.input1 + this.state.input2;
    return (
        <div>
            {total}<br />
            <input type="text" onChange={e => this.handleChange('input1', e.target.value)} />
            <input type="text" onChange={e => this.handleChange('input2', e.target.value)} />
        </div>
    )
}

。。。
构造函数（）{
超级（）；
this.state={input1:0，input2:0}；
this.handleChange=this.handleChange.bind（this）；
}
handleChange（输入，值）{
这是我的国家({
[输入]：值
})
}
render（）{
const total=this.state.input1+this.state.input2；
返回(
{total}

this.handleChange（'input1'，e.targ
...
constructor() {
    super();
    this.state = { input1: 0, input2: 0 };
    this.handleChange = this.handleChange.bind(this);
}

handleChange(input, value) {
    this.setState({
        [input]: value
    })
}

render() {
    const total = this.state.input1 + this.state.input2;
    return (
        <div>
            {total}<br />
            <input type="text" onChange={e => this.handleChange('input1', e.target.value)} />
            <input type="text" onChange={e => this.handleChange('input2', e.target.value)} />
        </div>
    )
}

                <form>
                    <input type="text" name = "username" onChange={this.onChange} value={this.state.username}/>
                    <input type="text" name = "password" onChange={this.onChange} value={this.state.password}/>
                    <br></br>
                    <button type="submit">Submit</button>
                </form>

constructor(props) {
    super(props);
    this.state = {
        username: '',
        password: ''
    };

    this.onSubmit = this.onSubmit.bind(this);
    this.onChange = this.onChange.bind(this);
}

onChange(event) {
    let inputName = event.target.name;
    let value = event.target.value;

    this.setState({[inputName]:value});


    event.preventDefault();
}

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

import React, { useState } from "react";

export default function Exapmle() {

const [userState, setUserState] = useState({
  firstName: "",
  lastName: ""
})

const handleChange = (e)=>{
   const value = e.target.value;
   setUserState({
    ...userState,
    [e.target.name]: value
   });
}

return (
  <form>

    <label>
      First name
      <input type="text" name="firstName" value={userState.firstName}
        onChange={handleChange}
      />
    </label>

    <label>
      Last name
      <input type="text" name="lastName" value={userState.lastName}
        onChange={handleChange}
      />
    </label>

  </form>
 );
}

const [values, setValues] = useState({
    email: "",
    password: "",
  });

const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
 };

<input 
onChange={handleChange("email")} 
value={email}
className="form-control"
type="email"
       />