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>

输入值未在React中更新

3 个答案: