Question

这是我的代码：

import React, { Component } from 'react'
import classnames from 'classnames'

class TodoTextInput extends Component {
  state = {
    text: this.props.text
  }

  handleSubmit = e => {
    const text = e.target.value.trim()
    if (e.which === 13) {
      this.props.onSave(text)
      this.setState({
        text: ''
      })
    }
  }

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

  handleBlur = e => {
    if (!this.props.newTodo) {
      this.props.onSave(e.target.value)
    }
  }

  render() {
    return (
      <input className={
             classnames({
               edit: this.props.editing,
               'new-todo': this.props.newTodo
               })
             }
             type='text'
             autoFocus='true'
             value={this.state.text}
             onChange={this.handleChange}
             placeholder={this.props.placeholder}
             onKeyDown={this.handleSubmit} />
    )
  }
}

export default TodoTextInput

当我运行此代码并开始输入输入字段时，我在控制台中收到以下错误消息：

警告：组件正在将类型为text的非受控输入更改为受到控制。

这让我相信value属性将this.state.text视为null或undefined。但是，当我添加||时，代码可以正常工作＆＃39; ＆＃39;在state.text结束时成为：

text: this.props.text || ''

我有两个问题：

为什么即使“＆＃39; ＆＃39;也应该转化为falsy 喜欢this.props.text？
为什么value属性将this.props.text视为null或undefined？

Answer 1

this.state.text的初始值未定义（意味着this.props.text未定义）。如果value input道具未定义，则React会将输入视为“不受控制”。

您应该在状态初始化

中回退到空字符串

state = {
  text: this.props.text || ''
}

要解决此问题或将default value分配给TodoTextInput

TodoTextInput.defaultProps = {
  text: ''
}

为什么一个空字符串在这个例子中起作用，但是this.state.foo不是吗？

1 个答案: