Reactjs 更新React函数内的状态

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

下面的示例是createreact应用程序文件中的App.js。我想在编辑textarea时更新h1标记的内容。我已经尽可能简化了这个例子

只有newData3和newData4反映textarea的内容

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

import React，{Component}来自'React'；
类应用程序扩展组件{
状态={
数据：'AA'，
新数据：“AA”
}
newData1=（）=>{this.state.data+“”+this.state.data}
render（）{
const newData2=（）=>{this.state.data+“”+this.state.data}
返回(
this.newData1（）={this.newData1（）}
newData2={newData2（）}
newData3={this.state.data+“”+this.state.data}
newData4={this.state.newData}
{
this.setState（{data:e.target.value}）；
this.setState（{newData:e.target.value+''+e.target.value}）
}}
/> 
);
} 
}
导出默认应用程序；

是的，这是可能的。在更改textArea调用函数时，如下所示。请记住，当您在组件中声明函数时，您需要在构造函数中绑定函数或使用箭头函数，如

下面的代码使用箭头函数：

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

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

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

下面的代码在构造函数中使用带绑定的常规函数

     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} /> 

构造函数（道具）{
超级（道具）；
this.handleextarea=this.handleTextArea.bind（this）；
}
小贩专区（东）{
this.setState（{data:e.target.value，newData:e.target.value+''+e.target.value
});
}

在render when call other component中，只需将状态值作为道具传递给该组件，并在h1标记中访问其他组件中的道具值，如

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

render（）{
}

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

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

{this.props.data}

---

请不要总是只在构造函数中绑定函数，而不要在组件的任何其他地方绑定函数。也不需要看到多个setState来更新两个不同的值，而是使用我在代码中提到的单个setState，您需要这样编写。沙箱

import React，{Component}来自'React'；
从“react dom”导入react dom；
类应用程序扩展组件{
构造函数（props）{//在构造函数中设置状态初始值
超级（道具）
此.state={
数据：“AA”，
新数据：“AA”
}
}
newData1（）{return（this.state.data+“”+this.state.data）}//这可以使用箭头函数，但仍然需要返回
render（）{
const newData2=（）=>{return（this.state.data+“”+this.state.data）}//此需要返回
返回(
newData1={this.newData1（）}
newData2={newData2（）}
newData3={this.state.data+“”+this.state.data}
newData4={this.state.newData}
{
this.setState（{data:e.target.value}）；
this.setState（{newData:e.target.value+''+e.target.value}）
}}
/>
);
}
}
导出默认应用程序；

您必须删除newData1和newData2的括号，以使返回语句隐式化：

newData1=（）=>this.state.data+“”+this.state.data

及

const newData2=（）=>this.state.data+“”+this.state.data

我希望这对你有帮助。

因此，问题的答案是肯定的，您可以使用组件状态在其他组件中呈现结果。你已经很接近了！ 您没有正确实现newData1和newData2函数。 我通过添加一些小的更改使您的代码稍有改进：

• 用过一次
• 解构你的状态值
• 将您的target.value存储在常量中
• 演示了如何在render（）中使用箭头函数
• 演示了如何使用newData1作为类方法

祝你好运！：）

import React，{Component}来自“React”；
从“react dom”导入react dom；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：“AA”，
新数据：“AA”
};
}
//方法定义
newData1（）{
返回this.state.data+“”+this.state.data；
}
render（）{
//请拆下机器！
常数{
状态：{data，newData}
}=这个；
//箭头函数
const newData2=（）=>data+“”+data；
返回(
this.newData1（）={this.newData1（）}
newData2={newData2（）}
newData3={data+“”+data}
newData4={newData}
{
//将值存储在常量中
常量值=e.target.value；
//使用setState一次，然后使用…进行浅拷贝
这是我的国家({
…这个州，
数据：价值，
新数据：值+“”+值
});
}}
/>
);
}
}
导出默认应用程序；
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

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

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;

 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);