javascript - React 初始输入值为空且未采用状态或 prop 值

Question

我用了很长时间的 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>)
  }
}

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

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

Answer 1

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