Question

我在这里有一个简单的程序React.js。我想要做的是点击一个用于显示人员年龄的名称。当我尝试更改状态而不将其传递给page1时，它可以正常工作。但是，当我尝试传递状态和设置状态函数时，它会让我出错我不太明白，因为我还在学习反应，所以我想我从一个简单的例子开始。

page1.js

import React from 'react';

const page1 = props => {
    //wrap in div
    //put in array form
    //make a higher order component
    return (
        <div>
            <h1 onClick = {() => props.showAge()}>Click to show age</h1>
            <h1>{props.age}</h1>
        </div>
    );
};

export default page1;

这是我的主要容器。底部的注释代码有效。当我试图将它传递给page1时，（我认为是）相当于那个。

pages.js

import React, { Component } from 'react';
import Page1 from './page1';
//import Page2 from './page2';
import './Pages.css';

class Pages extends Component {

  state = {
    age: "joe"
  }

  showAge() {
    this.setState({
      age: "25"
    });
  }

  render() {
    return (
      <div>
        <Page1 
        age = {this.state.age}
        showAge = {this.showAge} />
        {/*<h1 onClick= {() => this.showAge()}}>Click to show age</h1>
        <h1>{this.state.age}</h1>*/}
      </div>
    );
  }
}

export default Pages;

Answer 1

首先，您不需要在评论中说明的page1组件中触发showAge。像这样使用它：

<h1 onClick = {props.showAge}>Click to show age</h1>

然后，在构造函数中绑定showAge函数或改为使用箭头函数：

showAge = () =>
    this.setState({
      age: "25"
    });

将状态和setState传递给组件时，如何更改状态？

1 个答案: