Question

这是我的代码，我正在执行我所了解的关于状态和道具的所有内容，但是我似乎错过了一些东西，也不知道是什么。

我认为我在括号等方面有误。同样，我对这个简单问题的处理方式也有所不同，因为我没有关注React.org文档，应该改为引用它吗？

https://codepen.io/bradleyboy/pen/OPBpGw

class Item extends React.Component
{
  constructor(props){
    super(props);

  this.state = {
    status: "pending"
  };

  this.toggleTask = this.toggleTask.bind(this);
  }

  toggleTask(){
    this.setState(state => {
      if (state.status === "pending")
        return {status: completed}
      else 
        return {status: pending}
    }
  );
  }
  render(){
    return(
      <div>
        <h1>{props.name}</h1>
        <p>{this.state.status}</p>
        <button onClick = {toggleTask}> Click me! </button>
        </div>
    );
  }
}

class Application extends React.Component {
  constructor(props){
    super(props)
  }
  render() {
    return(<div>
      <Item name = "Work" />
      <Item name = "Play" />
    </div>);
  }
}

/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));

Answer 1

您不是在指您的类方法，而是这样做

return(
  <div>
    <h1>{this.props.name}</h1> 
    <p>{this.state.status}</p>
    <button onClick = {this.toggleTask}> Click me! </button>
    </div>
);

编辑

更改您的toggleTask并使用字符串将状态设置为，并且在类组件中使用this.props代替props

toggleTask() {
this.setState(state => {
  if (state.status === "pending") return { status: "completed" };
  else return { status: "pending" };
});

}

Sandbox向您展示如何完成

希望有帮助

Answer 2

如其他答案所述，您应使用this.value和this.toggleTask。您也可以像这样通过Hooks api使用更简单的方法：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Item(props) {
  const [status, setStatus] = useState('pending');

  function toggleTask() {
    const newStatus = status === 'pending' ? 'completed' : 'pending';
    setStatus(newStatus);
  }

  return (
    <div>
      <h1>{props.name}</h1>
      <p>{status}</p>
      <button onClick={toggleTask}> Click me! </button>
    </div>
  );
}

function Application() {
  return (
    <div>
      <Item name="Work" />
      <Item name="Play" />
    </div>
  );
}

/*
  * Render the above component into the div#app
  */
ReactDOM.render(<Application />, document.getElementById('root'));`enter code here`

还请注意，您不会导入具有您要使用的ReactDOM方法的render。

React.js无法实现状态

2 个答案: