React 初始输入值为空且不取状态或道具值答案

【问题标题】：React initial input value is empty and not taking the state or the prop valueReact 初始输入值为空且不取状态或道具值
【发布时间】：2019-12-02 20:34:38
【问题描述】：

我用了很长时间的 Vue，现在我正在转用 React。为了练习，我尝试将一些基本的 Vue 组件转换为 React。我在Vue上有一个简单的代码如下：

<template>
  <div>
    <h1>Hello {{message}}</h1>
    <input v-model:value="message" placeholder="Type a name"/>
  </div>
</template>

<script>
  export default {
    data(){
       return { message: 'World!' };
    }
  }
</script>

作为 React 的等价物，我做了以下工作：

export default class App extends React.Component {
  state={message: 'World!'};
  changeValue = e => { this.setState({message: e.target.value}); };
  render() {
    return (<div>
        <h1>Hello {this.state.message}</h1>
        <input value={this.message} placeholder="Type a name" onChange={this.changeValue}/>
      </div>)
  }
}

它起到了魅力，并且绑定与 Vue v-model 完全一样，所以反应性是完美的，除了一件事：输入的初始值不是消息状态 'world!' 但它是只是空的，显示占位符；因此，我认为它只是采用输入的默认值。我试图通过创建一个 getter 来使用计算属性，但我认为它可能会起作用，但徒劳无功。现在我确信我可以通过在方法循环componentDidMount 中安装组件后调用输入的onChange 处理程序来处理这个问题，但我觉得每次我必须这样做都不是一个好习惯使用输入，或者更糟糕的是，使用表单。你能告诉我吗：

为什么会根据 React 循环逻辑发生这种情况，
什么是最好的处理方法？

【问题讨论】：

用value={this.state.message}代替value={this.messageValue}。
确实如此。这是错误。我没有注意它，当我在处理程序或生命周期方法中工作时，我使用了this.state.message，所以是的，这就是错误。谢谢。只要回复，我就选它作为答案。

标签： javascript reactjs vue.js

【解决方案1】：

您应该使用value={this.state.message} 而不是value={this.message}。通过this.state 访问您的状态变量。

【讨论】：