Question

我正在尝试自学如何编写代码，并创建了一个小的待办应用程序。在每个待办事项输入的呈现中，我具有元素，然后单击复选框以将其删除。我试图创建一个单独的输入，以给出创建每个项目所需的时间。当我尝试将其链接到渲染方法时，没有任何渲染，并且错误消息为零。

import React from 'react';

class InputBar extends React.Component {
  state={ todo: '',
          time: null
        }

  onInputSubmit = e =>{
    e.preventDefault();
    this.props.todoSubmit(this.state.todo)
    this.props.timeSubmit(this.state.time)
    this.setState({
      todo: '',
      time: this.state.time
   })
  }

  render() {
    return (
      <div className="input-group mb-3">
        <form onSubmit={ this.onInputSubmit } >
          <label>Input Todo</label>
          <div className='input-control'>
            <input
              type='text'
              className="form-control"
              aria-label="Sizing example input"
              aria-describedby="inputGroup-sizing-default"
              value={this.state.todo}
              onChange={e => this.setState({
                todo: e.target.value
              })}
             />
            <input
              type='number'
              required
              className='input-control'
              defaultValue={0}
              value={this.state.time}
              placeholder='How long will it take?'
              onChange={e => this.setState({
                time: e.target.value
               })} />
          </div>
        </form>
      </div>
    )
  }
}; export default InputBar

    import React from 'react';
    import InputBar from './inputbar';

    class List extends React.Component {
      state = {
        list: [],
        nextId: 1
      };
      componentDidMount() {
          const list = JSON.parse( localStorage.getItem( "list" ) );
          this.setState( { list } );
      }

     addToList = (todo, time, list) => {
        this.setState({
          list: [
            {
              name: todo,
              text: time,
              id: this.state.nextId

            },
            ...this.state.list,
          ],
          nextId: this.state.nextId + 1
        },
          () => {
            localStorage.setItem("list", JSON.stringify(this.state.list));
          });
      }

     removeFromList = (id) => {
        this.setState({
          list: this.state.list.filter(entry => entry.id !== id )
        },
          () => {
            localStorage.setItem("list", JSON.stringify(this.state.list));
          }
        );
      }

      renderList = () => {
        return this.state.list.map((element) => {
            return (
              <div>
                <li>
                  {element.name}
                  <input
                    style={{marginLeft: '15px'}}
                    type='checkbox'
                    onClick={()=> this.removeFromList(element.id)}
                  />
                </li>
              </div>
            )
        })
      }

      render() {
        console.log(this.state.todo, this.state.time)
        return (
          <div>
            <InputBar
              todoSubmit={this.addToList}
              timeSubmit={this.addToList}
            />
            <ul>
              { this.renderList() }
            </ul>
          </div>
        )
      }
    };
    export default List; 
   //this is then send to imported an app component to be rendered

Answer 1

嗨，欢迎来到Elias的Stack Overflow。

您将两个处理程序传递给InputBar组件，它们都解析为列表组件中定义的addToList处理程序。但是，当您调用这些处理程序时，参数与addToList所期望的不匹配，即列表，待办事项和时间。

您显然不需要一个列表参数（addToList中从未使用过它，因为无论如何您都可以管理该组件状态中存在的列表，这很好），所以{{1 }}可以删除。

在我看来，您不需要2个处理程序（一个用于待办事项，一个用于时间值）。一个同时添加待办事项和时间的处理程序会更好（毕竟，此想法是将待办事项作为一个整体提交），并且与list的期望保持一致。

总之，这是我建议的更改：

在addToList中：

inputbar.js

在您的onInputSubmit = e => { e.preventDefault(); const { todo, time } = this.state this.props.handleSubmit(todo, time) this.setState({ todo: '', time: this.state.time }) }组件中：

List

如何在Reactjs中将两个输入渲染到一个列表中

1 个答案: