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

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>   )}

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;

Answer 2

我刚刚删除了您示例中的语法错误，它对我有用。

import React from 'react';

export default class InputField extends React.Component {

    constructor(props) {

        super(props)

        this.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>

        )

    }

}