Question

我有很多输入，我不想拥有像

这样的多个处理程序

1. systemctl stop docker 2. ip link set dev docker0 down 3. ip addr del 172.17.0.1/16 dev docker0 4. ip addr add 192.168.149.5/24 dev docker0 5. ip link set dev docker0 up 6. iptables -t nat -L -n iptables -t nat -F POSTROUTING 7. echo 'DOCKER_OPTS="--bip 192.168.149.5/24"' >> /etc/default/docker，handleInput1(){}等等。

但是我在下面的对象数组

时遇到了困难

handleInput2(){}

我怎么能通过只使用一个处理程序并在react中使用setState？

http://jsbin.com/godesacici/edit?js,console,output

Answer 1

您可以尝试按照以下方式执行此操作：通过name属性区分不同的输入并将结果存储在状态

class HelloWorldComponent extends React.Component {
  constructor(){
    super();
    this.state = {
      result: []
    }
  }
  handleInput(e) {
      console.log(e.target.value);
      var result = [...this.state.result];
      var idx = result.map(function(val){ return val.name}).indexOf(e.target.name);
      if(idx > -1) {
          result[idx].value=e.target.value;
      } else {
        result.push({name: e.target.name, value:e.target.value});
      }
       this.setState({result})
  }

  handleClick() {
    console.log(this.state.result);
  }

  render() {
    return (      
      <div>
      <div><input type="number" name="4" onChange={this.handleInput.bind(this)}/></div>
      <div><input type="number" name="3" onChange={this.handleInput.bind(this)}/></div>
      <div><input type="number" name="5" onChange={this.handleInput.bind(this)}/></div>
        <button onClick={this.handleClick.bind(this)}>submit</button>
      </div>
    );
  }
}

React.render(
  <HelloWorldComponent name="Joe Schmoe"/>,
  document.getElementById('react_example')
);

<强> JSBIN

Answer 2

所以你可以明确地将键字符串绑定到单个处理函数上，如下所示：

_handleInput(key, val) {
  let { ..state } = this.state;
  state[key] = val;
  this.setState(state);
}
render() {
  return <div>
           <input
            onChange={this.handleInput.bind(null, key1)}
            value={this.state.key1} />
           <input
            onChange={this.handleInput.bind(null, key2)}
            value={this.state.key2} />
         </div>
}

Answer 3

您可以添加name属性进行输入，并获取target.name，如下所示：

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

<input
    onChange={this._handleInput}
    value={this.state.key1} 
    name="key1"
/>

Answer 4

如果您更改状态模型以使每个表单元素具有一个键并使用一些像箭头函数这样的优点来以更清晰的语法捕获变量范围，则可以简化：

class HelloWorldComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      "3": {},
      "4": {},
      "5": {}
    }
  }

  handleInput(name, value) {
    this.setState({
      [name]: {
        name: name,
        value: value
      }
    });
  }

  handleClick() {
    console.log(this.state); 
  }

  render() {
    return (      
      <div>
      <div><input type="number" value={this.state["3"].value} onChange={(e) => this.handleInput(3, e.target.value)}/></div>
      <div><input type="number" value={this.state["4"].value} onChange={(e) => this.handleInput(4, e.target.value)}/></div>
      <div><input type="number" value={this.state["5"].value} onChange={(e) => this.handleInput(5, e.target.value)}/></div>
      <button onClick={(e) => this.handleClick()}>submit</button>
      </div>
    );
  }
}

React.render(
  <HelloWorldComponent name="Joe Schmoe"/>,
  document.getElementById('react_example')
);

让你的状态是一个没有被任何键入的值的数组会迫使你搜索状态并替换它（正如其他一些答案所示）。

简化事物以提高可读性和理解力通常是一个更好的主意

回想一下，React状态是加性的，因此仅使用部分状态更改调用setState会将其与现有状态合并。如果您在州内键入数据，则只能获得此优惠。

Answer 5

由于它是您想要修改的数组，因此您可以使用数组索引。假设初始状态是这个。

this.state = {
  array: [{
    name: 3,
    value: 1000
  },{
    name: 5,
    value: 1000
  }]
}

然后输入可以是这样的（对于名称为3的索引为0的那个）

<input value={this.state.array[0].value} onChange={this.handleChange.bind(this,0)}/>

因此，它将显示的值是数组中的第一个元素（索引为0），handleChange绑定到event并传递索引0。

handleChange(index,event){
this.setState((prevState) => ({array:[  
        ...prevState.array.slice(0, index),
        Object.assign({},prevState.array[index],{value:event.target.value}),
        ...prevState.array.slice(index + 1)
        ]}))
}

好的，这可能看起来有点复杂，但让我试着在这里解释一下。因此handleChange方法有两个参数 - 对应于输入文本的event和index，它是状态数组中元素的数组索引（在我们的示例中为0）。所以在this.setState我们采用prevState并使用了一些拼接。 ...prevState.array.slice(0,index)对应于我们修改之前的数组的所有元素。 ...prevState.slice(index+1)对应于之后的所有人。所以我们采用这两个集合并将它们与之间的修改元素连接起来。 Object.assign()对应于修改后的元素。它正在做的是取prevState.array[index]这是我们正在修改的元素，并将其value设置为与文本对应的event.target.value。

对多个输入onChange事件使用单个处理程序

5 个答案: