提交表单后，浏览器未更新空白状态

Question

1. 在这里，我正在使用AddTodo组件从用户那里获得新的待办事项：

import React from 'react'

const AddTodo = ({ onChange, onSubmit, newTodo }) => {
  return (
    <form>
      <textarea
        onChange={onChange}
        value={newTodo}
      />
      <button onClick={onSubmit}>
        Save
      </button>
    </form>
  )
}

export default AddTodo

1. 在“主页”（AddTodo的“父组件”）中，在将文本区域设置为空字符串后，文本区域未在浏览器中更新。

import React, { Component } from 'react'
import AddTodo from './AddTodo'

class Home extends Component {
  state = {
    todos: [
      {
        id: '1',
        content: 'Lorem ipsum dolor sit amet consectetur.'
      }
    ],
    newTodo: ''
  }

  handleChange = e => {
    this.setState({ newTodo: e.target.value })
  }

  handleSubmit = e => {
    e.preventDefault()

    let todosArr = [...this.state.todos]
    const newIndex = todosArr.length + 1

    todosArr.push({ id: newIndex, content: this.state.newTodo })
    this.setState({ todos: todosArr, newTodo: '' })
  }

  render() {
    return (
      <AddTodo onChange={this.handleChange} onSubmit={this.handleSubmit} />
    )
  }
}

export default Home

状态正在更新中。但这不是仅在浏览器中更新。

Answer 1

Home没有将newTodo状态传递给AddTodo组件。

编辑：您不会对该状态做任何事情，因此，在更新状态时，就UI而言，React没有任何作用。

编辑：该行必须是

<AddTodo 
  newTodo={this.state.newTodo} 
  onChange={this.handleChange} 
  onSubmit={this.handleSubmit} 
/>