单击按钮时反应更新输入值

Question

我有一个带有输入字段的 React 组件。

我想在单击按钮时更新输入字段的值，我可以在检查元素时确认该值发生变化但它没有显示在输入字段中。下面是一个示例代码，只是为了提供一个想法。

 class InputField {
 constructor(props) {
  super(props)
 }
 state = {
  userInput: ''
 }
}

onClick = () => {
 this.setState({
  userInput: 'Test'
 })
}

render() {
 return ( <input value={this.state.userInput} name="sampleInput" />
  <button onClick={this.onClick}> Click me </button>
 )
}

原文由 dealwap 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

修复语法

你的代码没问题，只是小订单。

我添加了整个组件

import React, { Component } from 'react';

class InputField extends Component {
  constructor(props) {
    super(props)
  }

  state = {
    userInput: ''
  }

  onClick = () => {
    this.setState({
      userInput: 'Test'
    })
  }

  render() {
    return (
      <div>
        <input value={this.state.userInput} name="sampleInput" />
        <button onClick={this.onClick}>Click me</button>
      </div>
    )
  }
}

export default InputField;

原文由 Omer 发布，翻译遵循 CC BY-SA 4.0 许可协议