Question

我对React有点新意，并且我正在构建一个todo应用程序。除了一个问题外，一切似乎都正常工作：当我在输入字段中输入待办事项并单击＆＃34;提交＆＃34;时，todo被推入我的数组，但它不会立即显示。只有在我更改输入内部的文本时才会显示待办事项。我猜这与在handleChange函数上发生的渲染有关，而与handleSubmit函数没有关系。任何帮助将不胜感激。

这是我的AddTodo组件

import React, { Component } from 'react';
import App from "./App"
import List from "./List"


class AddTodo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      array: []
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
     this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
    var array = this.state.array
    array.push(this.state.value);
    console.log(array)
  }

  render() {
    return (
      <div>
        <form>
          <label>
            Name:
            <input type="text" value={this.state.value} onChange={this.handleChange} />
          </label>
          <input onClick={this.handleSubmit} type="submit" value="Submit" />
       </form>
       <List array={this.state.array}/>
       </div>
     );
   }
 }

我的列表组件

import React, { Component } from 'react';

class List extends Component{
  render(){
    return(
      <div>
      {
        this.props.array.map(function(item, index){
          return <li key={index}>{item}</li>
        })
      }
      </div>
    )
  }
}

export default List;

Answer 1

默认情况下，调用setState（）会调用render（）函数。更多信息：ReactJS - Does render get called any time "setState" is called?

Answer 2

React会在props或state更改时渲染单个组件。为了更改状态，对于类组件，必须使用this.setState()方法，这是强制性的，该方法尤其确保必须在需要时调用render()

您的handleSubmit()方法直接更改了数组，这是被禁止的（仅在构造函数中允许设置初始状态）

如果您使用setState()，它应该可以工作。

React todo list显示todo onChange，而不是onSubmit

2 个答案: