输入 onChange 进行多次重新渲染

如何解决输入 onChange 进行多次重新渲染

我学习了 React，但遇到了一些问题。我以为我了解受控组件，但好吧，似乎并非如此。你能解释一下，为什么在 onChange 事件之后我会收到用于 rest Input 组件的道具？如果我想添加依赖于 this.pops.name 的标签，它会变得混乱（因为我在 console.log 中看到了道具）。我将不胜感激。

import React,{ Component } from "react";

class Input extends Component {
  handleChange = (e) => {
    this.props.onInputChange(e);
  };
  chooseLabel = (props) => {
    let { name } = props;
    console.log(name);
    if (name === "cost") {
      return (
        <label className="label" htmlFor={name}>
          How much do you earn per hour?
        </label>
      );
    } else if (name === "salary") {
      return (
        <label className="label" htmlFor={name}>
          How much do you want to spend?
        </label>
      );
    } else {
      return null;
    }
  };
  render() {
    console.log("this.props.nevVal",this.props.newVal);
    console.log("this.props.name",this.props.name);
    return (
      <div>
        {this.chooseLabel(this.props)}
        <input
          className="Input"
          value={this.props.newVal}
          name={this.props.name}
          placeholder={this.props.name}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      salary: "",cost: "",tip: ""
    };
  }

  handleInputChange = (e) => {
    console.log("E.target.name",e.target.name);
    this.setState({ [e.target.name]: e.target.value });
  };
  render() {
    return (
      <div className="App">
        <Input
          name="salary"
          newVal={this.state.salary}
          onInputChange={this.handleInputChange}
        />
        <Input
          name="cost"
          newVal={this.state.cost}
          onInputChange={this.handleInputChange}
        />
        <Input
          name="tip"
          newVal={this.state.tip}
          onInputChange={this.handleInputChange}
        />
      </div>
    );
  }
}

Link to Codesandbox.io

解决方法

当其中一个输入发生更改时，您会更新 App 组件的状态。当组件的状态更新时，它会重新渲染，它的所有子组件也会重新渲染。因此，即使您更改单个输入的值，所有输入都会重新呈现（并且它们的 newVal 会记录到控制台）。

我试着用下面的代码片段来说明它：

class Input extends React.Component {
  handleChange = (e) => {
    this.props.onInputChange(e);
  };
  chooseLabel = (props) => {
    let { name } = props;
    // console.log(name);
    if (name === "cost") {
      return (
        <label className="label" htmlFor={name}>
          How much do you earn per hour?
        </label>
      );
    } else if (name === "salary") {
      return (
        <label className="label" htmlFor={name}>
          How much do you want to spend?
        </label>
      );
    } else {
      return null;
    }
  };
  render() {
    console.log(`${this.props.name} input renderd`)
    return (
      <div>
        {this.chooseLabel(this.props)}
        <input
          className="Input"
          value={this.props.newVal}
          name={this.props.name}
          placeholder={this.props.name}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

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

    this.state = {
      salary: "",cost: "",tip: ""
    };
  }

  handleInputChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };
  render() {
    console.log("App component and all its children rendered :")
    
    return (
      <div className="App">
        <Input
          name="salary"
          newVal={this.state.salary}
          onInputChange={this.handleInputChange}
        />
        <Input
          name="cost"
          newVal={this.state.cost}
          onInputChange={this.handleInputChange}
        />
        <Input
          name="tip"
          newVal={this.state.tip}
          onInputChange={this.handleInputChange}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,rootElement
);

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

这是你的问题吗？