变量可以通过函数传递反应js吗？

编程问答 2022-08-22

问题描述

我在其中编写了一个类组件和多功能函数，但不知道变量如何在不同的函数之间传递。

class App extends Component {

  state = {
    stringA:null,stringB:null
  };

 set_A = (event) =>{
      const stringA = 'text';
 }
 copy_A = (event) =>{
      const stringB = stringA;
 }

 render() {
  return (
    <>
      <button onClick={this.set_A} type="click">set</button>
      <button onClick={this.copy_A} type="click">copy</button>
    </>
  );}
}
export default App;

我引用了此文档，但是它只表示功能组件，而没有类组件。 https://www.robinwieruch.de/react-function-component

或者，状态和道具不是一种变量吗？

解决方法

您可以使用this.props访问属性，并使用this.state访问状态。您可以通过调用setState来更改状态，该class App extends Component { state = { stringA:null,stringB:null }; set_A = (event) => { this.setState({ stringA: 'text' }); } copy_A = (event) => { this.setState({ stringB: this.state.stringA }); } render() { return ( <> <button onClick={this.set_A} type="click">set</button> <button onClick={this.copy_A} type="click">copy</button> </> ); } } export default App; 接受部分状态并将其合并为完整状态。它还会触发重新渲染，以便可以在UI中看到状态更改。

AWS_ACCESS_KEY_ID
,

因此在React中，您不会像这样为变量分配值。您将利用状态功能。对于基于类的React，您将使用this.setState({stringA: 'text'}) 要么 this.setState({stringB: stringA})

一旦值处于状态，您就可以从状态对象this.state.stringB在组件中的任何位置访问它们，例如，将具有单击copy按钮后设置的值

示例

  set_A = (event) => {
    this.setState({ stringA: 'text' });
    console.log(this.state.stringB)
  }
  copy_A = (event) => {
    this.setState({ stringB: this.state.stringA });
  }

反应文档也是参考基于类和函数的组件行为的重要资源。 https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class

,

您可以通过在基于类的组件中调用 setState 来更改状态 试试这个：

class App extends Component { 
       state = { stringA:null,stringB:null }; 
       set_A = (e) => { 
             this.setState({...state,stringA: 'text' });
        } 
       copy_A = (e) => { 
             this.setState({ ...state,stringB: this.state.stringA });
       } 
      render() {
             return ( 
                    <> 
                      <button onClick={this.set_A} type="click">set</button> 
                      <button onClick={this.copy_A} type="click">copy</button>
                    </>
             );
       } 
} 
export default App;

使用 传播算子 {...state}仅更改要更改的目标状态，而其他状态则保持不变。

javascriptreact-statereactjsreactjs