Question

对于我的课程，我必须使用JSX创建一个使用ID“root”呈现的脚本。输出需要看起来像图像。

What the final rendering should look like 到目前为止，这是我的代码。我觉得我几乎就在那里，但我有点陷入困境。我不知道还有什么需要添加或更改。有人能帮助我理解我在这里缺少的东西吗？

import React from 'react';
import ReactDOM from 'react-dom';

const App = props => {
  return <NumberOfStudents />;
}

class NumberOfStudents extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      enrolledStudents: {
        numberOfStudents: 87
      },
      waitlistedStudents: {
        numberOfStudents: 8
      }
    };
  }

  incrementOneEnroll () {
    this.setState({ numberOfStudents: this.state.enrolledStudents.numberOfStudents + 1});
  }
  incrementMoreEnroll () {
    this.setState({ numberOfStudents: this.state.enrolledStudents.numberOfStudents + parse(this.state.addAmount)});
  }
  incrementOneWait () {
    this.setState({ numberOfStudents: this.state.waitlistedStudents.numberOfStudents + 1});
  }
  incrementMoreWait () {
    this.setState({ numberOfStudents: this.state.waitlistedStudents.numberOfStudents + parse(this.state.addAmount)});
  }
  
  render() {
    return (
      <div>
        <h1>Enrolled Students: {this.state.enrolledStudents.numberOfStudents}</h1>

          <p><button onClick={this.incrementOneEnroll.bind(this)}>Add 1 Enrolled Student</button></p>
      
          <p><input type="number" onChange={event => this.setState({ addAmount: event.target.value })} value={this.state.addAmount}/>
          <button onClick={this.incrementMoreEnroll.bind(this)}>Increase Students</button></p>


        <h1>Waitlisted Students: {this.state.waitlistedStudents.numberOfStudents}</h1>
        
          <p><button onClick={this.incrementOneWait.bind(this)}>Add 1 Waitlisted Student</button></p>

          <p><input type="number" onChange={event => this.setState({ addAmount: event.target.value })} value={this.state.addAmount}/>
          <button onClick={this.incrementMoreWait.bind(this)}>Increase Students</button></p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<!doctype html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="root"></div>
        <script src="bundle.js"></script>
    </body>
</html>

掌握JSX组件状态

0 个答案: