在使用 create-react-app 结构时制作更新道具 onChange 的输入？

Question

我正在制作一个基于网络的计算器工具，它会在用户更改四个输入字段时实时更新图表。

问题是，我对道具的了解不够深。而且我得到了一些应该只有 3 行代码的错误（如果我不能同时更新所有 this.income，可能会更多。

Create-react-app的props->render->return结构也更加复杂，因为基本上有一个js区和一个html区。

注意：下面的一些代码可能是多余的，例如 const 道具，因为我正在使用它。反而。

This is what it looks like:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Collapse,  Navbar, Form,  NavbarToggler,    NavbarBrand,    Nav,    
NavItem,    NavLink,    Container,    Row,  Col,  Jumbotron,  Button,  
ButtonToolbar    } from 'reactstrap';
import { zingchart }from 'zingchart';
import {core as Core} from 'zingchart-react';

class App extends React.Component {
  constructor(props) {
        super(props);

      //  this.handleChange = this.handleChange.bind(this);

  //These may not be needed:
        const trd = 0;
        const itr = 7;
        const lit = 6;
        const tei = 4;


        //this array of props keep track of values:
        this.income = {trd:8,itr:8,lit:8,tei:8};
        //this array sends values to the graph:
        this.formula = { a: ((this.income.lit*this.income.trd)*(1- 
        this.income.itr)), b: (this.income.lit*this.trd), c: this.income.tei}

        //Logic for Graph:
        //a = (lit * trd) * 1 - itr
        //b = lit * trd
        //c = tei
  }

        // function updateAField(modifiable,goalValue){
        //   modifiable = goalValue;
        // };


  render() {
    var myConfig = {
    // This is just the irrelevant graph info - it has been shortened for 
    // readability on Whosebug
               type: "bar3d",
               "stacked": true,
               series : [{values : [this.formula.a, this.formula.b, 
               this.formula.c]}]
             };

    return (

      <div class="row">
        <div class="column">
          <div className="App">
                  <header className="App-header">

                          <header className="App-form">
                          <br/><br/><br/><br/><br/><br/>
                                    <form>
                                    <label class="title" >Income 
 Distribution</label>
                                    <br/>
                                    <br/>
                                    <br/><label>Traditional/Roth Dist% 
 </label>
              <input id="trd" type="text" value={this.income.trd} onChange= 
              {this.income.trd.bind(this) } required />
                                    <br/><label>Income Tax Rate %</label>
              <input id="itr" type="text" value={this.income.itr} onChange={e 
              => this.onChange(e.target.value)} required />
                                    <br/><label>Life Insurance Total 
 $</label>
              <input id="lit" type="text" value={this.income.lit} onChange={e 
              => this.onChange(e.target.value)} required/>
                                    <br/><label>Tax Exempt Income $</label>
              <input id="tei" type="text" value={this.income.tei} onChange={e 
               => this.onChange(e.target.value)} required/>
                                    </form>
                                  <br/>
                            </header>
                    </header>
                </div>
              </div>
                  <div class="column">
                  <img src="./bws.jpg" className="App-logo" alt="logo" />
                  <p>Define Your Future</p>
                  <Core id="myChart" height="400" width="800" data={myConfig} 
  />
                  <a className="App-link"href=""target="_blank"rel="noopener 
  noreferrer">Return to BWS</a>
                  </div>
      </div>
    );
  }
 }

export default App;

Answer 1

我认为你缺少的是 React 中 state 的想法。组件只会在以下三种情况之一发生时重新渲染：

道具变化（抽象成shouldComponentUpdate）
状态变化（抽象成shouldComponentUpdate）
调用 this.forceUpdate

您希望在组件中更改的任何内容都应该在更改时影响渲染内容，这些更改需要存储在状态中。在初始渲染之后，您的组件将永远不会再次更新，因为您永远不会更改状态，也永远不会更改父级传入的道具。

import { PureComponent } from 'react';

class MyComponent extends PureComponent {
  static propTypes = {
    initialValue: PropTypes.number,
  }

  constructor(props) {
    super(props);

    this.state = {
      valueThatChanges: props.initialValue;
    };
  }

  handleChange = (event) => {
    this.setState({ valueThatChanges: calculateValue(event) });
  }

  render() {
    return (
      <input onChange={this.handleChange} value={this.state.valueThatChanges} />
    );
  }
}

Answer 2

这终于奏效了。我将它用于所有四个变量！

 constructor(props) {
        super(props);
                      //this props array keeps track of values and contains 
 placeholders:
                      this.state = {trd:3,itr:30,lit:1329454,tei:66473};
                     }

      //this method updates it's target to what is in the field
        changeField(prp,id) {
          let val = document.getElementById([id]).value;
          this.setState(prevState => ({ [prp]: val }));
          }


<input id="a" type="text" value={this.state.trd} onChange={() => 
this.changeField('trd','a')}/>

在使用 create-react-app 结构时制作更新道具 onChange 的输入？

Making inputs that update props onChange when using create-react-app structure?

html

javascript

onchange

create-react-app