如何创建单个输入处理程序[重复]

Question

我有几个输入，每个输入都有自己的值。我怎样才能为所有输入提供 (onChange) 函数？ 例如

 handleChange1(event) {
    this.setState({value1: event.target.value});
  }
 handleChange2(event) {
    this.setState({value2: event.target.value});
  }
  }
 handleChange3(event) {
    this.setState({value3: event.target.value});
  }

  <input type="text" value={this.state.value1} onChange={this.handleChange1} />
  <input type="text" value={this.state.value2} onChange={this.handleChange2} />
  <input type="text" value={this.state.value3} onChange={this.handleChange3} />

我只想拥有一个handleChange

Answer 1

当需要处理多个受控输入元素时，可以给每个元素添加一个name属性，让handler函数根据event.target.name的值来选择做什么。

例如：

handleInputChange(event) {
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const name = target.name;

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

render() {
return (
  <form>
    <label>
      value1:
      <input
        name="value1"
        type="checkbox"
        checked={this.state.value1}
        onChange={this.handleInputChange} />
    </label>
    <br />
    <label>
      value2:
      <input
        name="value2"
        type="number"
        value={this.state.value2}
        onChange={this.handleInputChange} />
    </label>
    <br />
    <label>
      value3:
      <input
        name="value3"
        type="text"
        value={this.state.value3}
        onChange={this.handleInputChange} />
    </label>
  </form>
 );
}
}

Answer 2

如果您将name 添加到input，您可以在事件之外使用它。

handleChange1(event) {
    const {name, value} = event.target
    this.setState({[name]: value});
}

<input name="inputone" type="text" value={this.state.value1} onChange={this.handleChange1} />
<input name="inputtwo" type="text" value={this.state.value2} onChange={this.handleChange2} />
<input name="inputthree" type="text" value={this.state.value3} onChange={this.handleChange3} />

Answer 3

您可以简单地使用input name：

代码：

import React from "react";
import "./styles.css";

class MyComponent extends React.Component {
  state = {
    value1: "",
    value2: "",
    value3: ""
  };
  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  };
  render() {
    console.log(this.state);
    return (
      <>
        <input
          name="value1"
          value={this.state.value1}
          type="text"
          value={this.state.value1}
          onChange={this.handleChange}
        />
        <input
          name="value2"
          value={this.state.value2}
          type="text"
          value={this.state.value2}
          onChange={this.handleChange}
        />
        <input
          name="value3"
          value={this.state.value3}
          type="text"
          value={this.state.value3}
          onChange={this.handleChange}
        />
      </>
    );
  }
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <MyComponent />
    </div>
  );
}

演示：https://codesandbox.io/s/beautiful-brook-p46zs?file=/src/App.js:0-1092

Answer 4

我总是通过 switch case 来做到这一点

 handleChange(event) {
            switch (event.target.name) {
                case 'name1':
                    this.setState({ name1: event.target.value });
                    break;
                case 'name2':
                    this.setState({ name2: event.target.value });
                    break;
                 case 'name3':
                    this.setState({ name3: event.target.value });
                    break;
                default:
                    break;
            }
    }


<input type="text" name="name1" value={this.state.value1} onChange={this.handleChange1} />
  <input type="text" name="name2" value={this.state.value2} onChange={this.handleChange2} />
  <input type="text" name="name3" value={this.state.value3} onChange={this.handleChange3} />

Answer 5

您可以对每个字段使用反应挂钩 useState：

const [value1,setvalue1] = useState();
<input type="text" value={value1} onChange={(e)=>setvalue1(e.target.value)}/>

您仍然可以更改每个输入的句柄，但您编写的代码更少。

你也可以在这里查看更多关于 react hooks 的信息：https://reactjs.org/docs/hooks-state.html

Answer 6

如果所有输入都相同，我认为我们可以动态渲染它们，这样我们就不需要重复自己，也可以使代码更干净。 我认为我们可以有一个输入数组，然后动态渲染。通过使用闭包，我们可以为所有输入创建一个 handleChange 函数。

state={
  inputValues: []
}
handleChange(index){
  return (event)=>{
    this.state.inputValues[index] = event.target.value;
    this.setState({inputValues: this.state.inputValues})
  }
  
}

render(){
  return this.states.inputValues.map((inputValue, index)=>
    <input type="text" value={inputValue} onChange={this.handleChange(index)} />    
  )
}