輸入值未在React中更新

Question

我有兩個文件：處理狀態的App.js和Counter.js。 一切都會顯示出來，接受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

Answer 1

更改handle更改為箭頭功能。 它沒有綁定到類，因此箭頭函數將刪除上下文，或者您可以在構造函數中綁定該函數。

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

這為您提供了一個動態鍵，以便您可以對所有輸入使用此handeChange函數，而不必編寫新的。

在count.js中的事件上也不會傳遞事件。

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

Answer 2

問題出在您的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} />

因此，輸入屬性“名稱”允許您指定“事件目標名稱”，並使用它們通過一個處理程序通過“事件目標值”更改特定狀態值

Answer 3

您在handleChange函數以及從計數器調用方法方面都遇到了一些問題。 請參閱以下示例：

 class App extends React.Component { state = { cost: 0, houseCost: 0, downPayment: 0, termOfLoan: 0, annualInterestRate: 0 } handleChange = (e, key) => { this.setState({[key]: e.target.value}); } 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> ); } } const Counter = (props) => ( <div className="counter"> <input type="text" value={props.houseCost} placeholder="House Cost" onChange={e => props.handleChange(e, 'houseCost')} /> <input type="text" value={props.downPayment} placeholder="Down Payment" onChange={e => props.handleChange(e, 'downPayment')} /> <input type="text" value={props.termOfLoan} placeholder="Mortgage Period (years)" onChange={e => props.handleChange(e, 'termOfLoan')} /> <input type="text" value={props.annualInterestRate} placeholder="Interest Rate" onChange={e => props.handleChange(e, 'annualInterestRate')} /> <button className="counter-action" onClick={props.changeCost}>Calculate</button> <span className="counter-score">{ props.cost }</span> </div> ); ReactDOM.render( <App />, document.getElementById("react") ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="react"></div>