javascript - Todo React JS 应用程序 1

Question

需要创建一个 React 应用程序，为用户显示文本输入，他们将能够编写一个任务，并在输入旁边显示一个按钮。单击时，此按钮应将用户的输入添加到待办事项列表中。不应将空白项目添加到列表中。每个列表项必须显示一个复选框以及用户编写的任务。选中该复选框时，应从列表中删除该列表项。我还收到以下错误:error message 我的代码:

App.js:
import React, { Component } from 'react';
import MyList from './MyList.js';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { task };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }


  handleChange(e) {
    const name = e.target.name;
    const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    this.setState({ [name]: value });
  }

  handleSubmit(e) {
    e.preventDefault();
    console.log('SUBMITTED', this.state);
  }

  render() {
    return (
      <div className="App">
        <MyList
          name="task"
          currentTask={this.state.task}
          onSubmit={this.handleSubmit}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

export default App;

MyList.js:
import React, { Component } from 'react';
import App from "./App.js";

class MyList extends Component {
    constructor (props) {
        super(props);
        this.state = { task };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(e) {
        const name = e.target.name;
        const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
        this.setState({ [name]: value });
    }

    handleSubmit(e) {
        e.preventDefault();
        console.log('SUBMITTED', this.state);
    }

    render () {
        return (
            <div>
                My Task List
                <input type="text" name="task" />
                <button onClick={this.handleSubmit}>Add</button>
                <br />
                { this.handleChange }
            </div >
        );
    }
}

export default MyList;

Answer 1

首先，您需要使用初始值初始化任务状态，该初始值可以为 null 或空字符串，如下所示:

this.state = { task : '' }

其次，您必须将 this.handleChange 方法放在输入的 onChange 上，如下所示:

<input type="text" name="task" onChange={this.handleChange} />.

查看代码了解更多详情:CodeSandBox

class ListItem extends React.Component {

  render (){
      return(
        <li>
          <input type="checkbox" onChange={this.props.onCheckBoxChange} />
          <span>{this.props.text}</span>
        </li>
      )
  }
  
}

class MyList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.tasks.map(task => {
          return <ListItem key={task.id} text={task.text} onCheckBoxChange={()=>this.props.deleteListItem(task.id)} />;
        })}
      </ul>
    );
  }
}

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { 
      tasks : [] 
    };

    this.input = null;
  }

  addItemList(e){
    // APPEND THE ITEM TO THE TASKS ARRAY
    this.setState((prevState) => ({
      tasks: [
          ...prevState.tasks,
          {
            id : new Date().getTime(),
            text : this.input.value
          }
        ]
    }))
  }

  deleteItem(itemId){

    this.setState((prevState)=>({
      tasks: prevState.tasks.filter((item)=>item.id !== itemId)
    }))
  }

  render() {
    return (
      <div className="App">
        <div>
          My Task List
          <input ref={(ref)=>{this.input = ref}} type="text" />
          <button onClick={this.addItemList.bind(this)}>Add</button>
        </div>

        <MyList
            tasks={this.state.tasks}
            deleteListItem={(itemId)=>this.deleteItem(itemId)}
        />

      </div>
    );
  }
}


const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

ReactDOM.render(<App />, document.getElementById('root'));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>