Javascript 反应-我是否应该为每个表单输入设置不同的输入更改事件

我正在构建一个抵押计算器应用程序，我想让它在用户面前实时更新。要做到这一点，我需要在输入更改时更新状态，以便组件重新加载

我计划在每个输入字段上使用

onChange

事件来实现这一点，我的问题是

onChange

事件是否应该为每个输入调用不同的函数来更新该状态属性，或者是否有办法拥有一个函数，并更改正在更新的状态属性

例如，这里是我的类组件，带有form、state和onInputChange函数

class Calculator extends Component {
    state = {
        price: 250000,
        term: 20
    };

    onInputChange = (event) => {
        this.setState({ price: event.target.value })
    };

    render() {
        return (
            <div>
                <form>
                    <label htmlFor="propertyPrice">Property Price</label>
                    <input 
                        type="number" 
                        id="propertyPrice" 
                        name="propertyPrice"
                        value={this.state.price}
                        onChange={this.onInputChange}
                    />

                    <label htmlFor="term">Mortgage Term</label>
                    <input 
                        type="term" 
                        id="term" 
                        name="term"
                        value="3"
                    />

                </form>
            </div>
        );
    }
}

类计算器扩展组件{ 状态={ 价格：25万， 任期：20 }; onInputChange=（事件）=>{ this.setState（{price:event.target.value}） }; render（）{ 返回( 物业价格 抵押期限 ); } }

---

正如您在Property Price input上看到的，我正在使用

onChange

事件调用函数

onInputChange

，该函数直接更新状态中的价格。我是否需要为抵押期限输入使用一个新函数，或者我可以使用一个函数只更改我正在更新的状态属性，如果是，我如何确定函数中正在更新的状态属性？

使表单输入标记名称与状态名称相同，然后您可以为每个输入的onChange处理程序添加此标记

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

我是这样做的：-

• 像这样创建一个

  onInputChange（）

• 现在创建任意数量的输入，但确保onChange处理程序接收到如下函数

---

也许这会帮助你，这是最好的方法。我就是这样做的。谢谢，不用客气……我也是这样做的，只是从事件对象中获取了属性名。它更干净，而且我不必在每个重新加载程序上运行实际的函数。这是错误的做法onInputChange=（event）=>{const{name，value}=event.target this.setState（{[name]：value}）；}；

 onInputChange = (name, value) = {
    this.setState({[name]: value})
  }

onChange = {(e) => onInputChange(nameOfInput, e.target.value)}