Question

是否可以更新函数内部的反应状态，并在其他组件中查看结果？

下面的示例是create-react-app文件中的App.js。我想在编辑textarea时更新h1标签的内容。我已尽可能简化了示例。

只有newData3和newData4反映文本区域的内容。

newData1和newData2仅呈现“ this.newData1（）=”和“ newData2 =”

import React, { Component } from 'react';
class App extends Component {
  state = {
    data:'AA',
    newData: 'AA AA'
    }
  newData1=()=>{this.state.data + " " + this.state.data}
  render() {
    const newData2=()=>{this.state.data + " " + this.state.data}
    return (
      <div>
        <h1>this.newData1() = {this.newData1()}</h1>
        <h1>newData2={newData2()}</h1>
        <h1>newData3={this.state.data + " " + this.state.data}</h1>
        <h1>newData4={this.state.newData}</h1>
      <textarea 
      value={this.state.data} 
      onChange={(e) => {
        this.setState({data:e.target.value}) ;
        this.setState({newData:e.target.value + ' ' + e.target.value})
      }}
        /> 
</div>
    );
  } 
}

export default App;

Answer 1

您需要这样写。沙盒https://codesandbox.io/s/ywzoq8oqmx

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

    class App extends Component {
      constructor(props) { // Set state initial value in constructor function
        super(props)
        this.state = {
          data: 'AA',
          newData: 'AA AA'
        }
      }
      newData1() { return (this.state.data + " " + this.state.data) } // This can use arrow funtion, but still need return
      render() {
        const newData2 = () => { return (this.state.data + " " + this.state.data) } // this need return
        return (
          <div>
            <h1>newData1={this.newData1()}</h1>
            <h1>newData2={newData2()}</h1>
            <h1>newData3={this.state.data + " " + this.state.data}</h1>
            <h1>newData4={this.state.newData}</h1>
            <textarea
              value={this.state.data}
              onChange={(e) => {
                this.setState({ data: e.target.value });
                this.setState({ newData: e.target.value + ' ' + e.target.value })
              }}
            />
          </div>
        );
      }
    }

    export default App;

Answer 2

您必须删除newData1和newData2的括号以隐含return语句：

newData1 = () => this.state.data + " " + this.state.data

和

const newData2 = () => this.state.data + " " + this.state.data

希望对您有帮助。

Answer 3

是的，有可能。在textArea的onChange中，调用如下函数。请记住，在组件内部声明函数时，您需要在构造函数中绑定该函数或使用箭头函数，如

下面的代码使用箭头功能：

  handleTextArea = e => {
      this.setState({data:e.target.value, newData:e.target.value + ' ' + e.target.value
      });
 }

   <textarea value={this.state.data} onChange={this.handleTextArea} />

以下代码将常规函数与构造函数绑定使用

     constructor(props){
         super(props);
         this.handleRextArea = this.handleTextArea.bind(this);
     }

     handleTextArea(e) {
      this.setState({data:e.target.value, newData:e.target.value + ' ' + e.target.value
      });
 }

   <textarea value={this.state.data} onChange={this.handleTextArea} />

在渲染中，当调用其他组件时，只需将状态值作为prop传递给该组件，并在h1标签中访问其他组件中的props值，例如

      render(){
         <div>
             <textarea value={this.state.data} onChange={this.handleTextArea} /> 
              <OtherComponent data={this.state.data} />
         </div>
      }

现在在其他组件中显示数据，例如

     <h1>{this.props.data}</h1>

请不要始终只在构造函数中绑定函数，而不能在组件中的其他任何地方绑定函数。同样也无需查看多个setState来更新两个不同的值，而是使用我在代码中提到的单个setState

Answer 4

https://codesandbox.io/s/042j0lwn0

所以问题的答案是的，您可以使用components状态将结果呈现到其他components中。您已经接近了！您没有正确实现newData1和newData2函数。通过添加一些小的更改，我使您的代码稍微好一点：

仅使用一次setstate
解构您的状态值
将target.value存储在const
向您展示了如何在render（）中使用箭头功能
向您展示了如何将newData1用作类Method

祝你好运！：）

 import React, { Component } from "react";
    import ReactDOM from "react-dom";
    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          data: "AA",
          newData: "AA AA"
        };
      }

      // method definition
      newData1() {
        return this.state.data + " " + this.state.data;
      }

      render() {
        // please desturucture!
        const {
          state: { data, newData }
        } = this;

        // arrow function
        const newData2 = () => data + " " + data;

        return (
          <div>
            <h1>this.newData1() = {this.newData1()}</h1>
            <h1>newData2={newData2()}</h1>
            <h1>newData3={data + " " + data}</h1>
            <h1>newData4={newData}</h1>
            <textarea
              value={data}
              onChange={e => {
                // store the value in a const
                const value = e.target.value;

                // use setState once and use the ... to make a shallow copy
                this.setState({
                  ...this.state,
                  data: value,
                  newData: value + " " + value
                });
              }}
            />
          </div>
        );
      }
    }

    export default App;

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

更新React函数中的状态

4 个答案: