Javascript 输入值未在React中更新

我有两个文件：处理state的App.js和Counter.js。所有内容都会显示，accept onChange不会更新输入中的值。我在柜台上做错了什么？我应该用不同于使用道具的方式来处理它吗

import React, { Component } from 'react';

import Counter from './components/Counter';
import './App.css';

class App extends Component {
  state = {
    cost: 0,
    houseCost: 0,
    downPayment: 0,
    termOfLoan: 0,
    annualInterestRate: 0
  }
  handleChange(e) {
    this.setState({houseCost: e.target.houseCost});
  }
  handleCostChange = () => {
    this.setState(
      prevState => ({
        cost: prevState.cost += 1
      })
    );
  }
  render() {
    return (
      <div className="App">
        <Counter
          cost={this.state.cost}
          houseCost={this.state.houseCost}
          downPayment={this.state.downPayment}
          termOfLoan={this.state.termOfLoan}
          annualInterestRate={this.state.annualInterestRate}
          changeCost={this.handleCostChange}
          handleChange={this.handleChange}
        />
      </div>
    );
  }
}

export default App;

Counter.js

    import React from 'react';


const Counter = (props) => {

        return (
            <div className="counter">
                <input type="text" value={props.houseCost} placeholder="House Cost" onChange={() => props.handleChange}></input>
                <input type="text" value={props.downPayment} placeholder="Down Payment" onChange={() => props.handleChange}></input>
                <input type="text" value={props.termOfLoan} placeholder="Mortgage Period (years)" onChange={() => props.handleChange}></input>
                <input type="text" value={props.annualInterestRate} placeholder="Interest Rate" onChange={() => props.handleChange}></input>
                <button className="counter-action" onClick={props.changeCost}>Calculate</button>
                <span className="counter-score">{ props.cost }</span>
            </div>
            );
    }


export default Counter;s

---

将handleChange更改为箭头函数。它没有绑定到类，因此箭头函数将删除上下文，或者您可以在构造函数中绑定该函数

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

这将为您提供一个动态键，以便您可以将此HandChange函数用于所有输入，而不必编写新的输入

此外，count.js中的事件不会传回事件

onChange={(e) => props.handleChange(e, 'houseCost')}

---

在handleChange函数和从计数器调用它的方式方面，您遇到了一些问题。请参见下面的示例：

类应用程序扩展了React.Component{ 状态={ 成本：0， 房屋成本：0， 首期付款：0， termOfLoan:0， 年利率：0 } handleChange=e，键=>{ this.setState{[key]：e.target.value}； } handleCostChange==>{ 这是我的国家 prevState=>{ 成本：prevState.cost+=1 } ; } 渲染{ 回来 ; } } 常量计数器=道具=> props.handlechange，“房屋成本”} /> props.handlechange，“首付款”} /> props.handlechange，'termOfLoan'} /> props.handlechange，'annualInterestate'} /> 计算 {props.cost} ; ReactDOM.render , document.getElementByIdreact ;

---

问题出在onChange处理程序中。当您调用此方法时，您只更改了一个值houseCost的状态，最后，预期的e.target.value不正确。试着这样做：

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

对于每个输入，如：

 <input type="text" name="houseCost" value={props.houseCost} placeholder="House Cost" onChange={() => props.handleChange} />

---

因此，输入属性名称允许您指定事件目标名称，并使用它们通过一个处理程序按事件目标值更改特定的状态值

此处所需的行为是什么？这有点不清楚。以输入的房屋成本为例-现在它从状态中获取值0，并且不会根据输入进行更新。如果您很接近，您稍微错过了我的实现：{[key]：e.target.houseCost}；谢谢@Ted我喜欢你动态地使用键盘，请评论你认为这个答案可以改进的任何方式，甚至提交编辑。