Входное значение не обновляется в React

Question

У меня есть два файла: App.js, который обрабатывает состояние, и Counter.js. Все отображается, accept onChange не обновляет значения на входе. Что я делаю не так в Counter? Должен ли я обращаться с этим иначе, чем с помощью реквизита?

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

У вас есть пара проблем, как в функции handleChange, так и в том, как она вызывается из counter. Смотрите пример ниже:

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>

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 на функцию стрелки. Он не привязан к классу, поэтому функция со стрелкой удалит контекст, или вы можете связать функцию в конструкторе.

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

это дает вам динамический ключ, так что вы можете использовать эту функцию handeChange для всех ваших входов и не создавать новую.

также ваше событие в count.js не передает событие назад.

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