Question

我正在学习反应js。但是，我在渲染新页面时遇到了麻烦。我只想检查我的代码是否有效。以下是我的代码。我不知道我的代码有什么问题。

enter code here




class PageOne extends React.Component{

handleOnClick = () => {
this.props.Edit();
}

render(){
    return(
    <div>
    <p>This page is from PageOne</p>
    <form>
    <button onClick={this.handleOnClick}>Edit</button>
    <p>{this.props.check?"check is true now":"check is false now"}</p>
  </form>
  </div>
       );
    }
  }

class PageTwo extends React.Component{
  render(){
    return(
    <div>
    <h1>This page is from PageTwo</h1>
  </div>
    );
  }
}

class App extends React.Component{
   state = {check:true};

   handleEdit = () => {
     this.setState=({
       check:false
    });
   }
      render(){
         return(
         <div>
             {this.state.check? <PageOne {...this.state} Edit={this.handleEdit}/> : <PageTwo />}
         </div>
         );
   }
  }

ReactDOM.render（，mountNode）;

Answer 1

除了AnilRedshift的答案之外，同样重要的是要注意，只要你将<form>组件与React一起使用，你可能希望将事件传递给该函数并在其上调用preventDefault

e.x。

handleOnClick = (e) => {
  e.preventDefault();
  this.props.Edit();
}

这可以防止页面尝试重新加载（由于在PageOne和PageTwo之间切换，因此只有在修复后才会发生这种情况）

Answer 2

在HandleEdit中，您需要致电this.setState而不是分配它：

handleEdit = () => {
  this.setState({
    check:false
  });
}

使用setState时出现问题

2 个答案: