如何解决变量可以通过函数传递反应js吗?
我在其中编写了一个类组件和多功能函数,但不知道变量如何在不同的函数之间传递。
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}
仅更改要更改的目标状态,而其他状态则保持不变。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。