Question

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

我想在单击按钮时更新输入字段的值，我可以在检查元素时确认该值已更改，但它不会显示在输入字段中。下面是一个示例代码，仅供参考。

RelativeLayout

Answer 1

一种方法是通过hooks将其实现为功能组件。例如，您可以使用state hook来存储和呈现userInput数据，如下所示：

import React from "react";

/* Declare functional InputField component */
function InputField () {

  /* Define local state hook to store the "user input" data */
  const [userInput, setUserInput] = React.useState("");

  const onClick = (e) => {
      /* Prevent button click's default behavior */
      e.preventDefault();
      /* Call the state's "setter" method to update "userInput" state */
      setUserInput('Test')
  }

   /* Render both input and button in a <> fragment */    
   return (<>
     <input value={this.state.userInput} name="sampleInput"/>
     <button onClick={onClick}>Click me</button>  
   </>)
}

要使用此组件，只需将其呈现为：

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

Answer 3

修复语法

您的代码没问题，只需要一点命令即可。

我添加了整个组件

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 4

似乎您有一些类型错误，我重新创建了没有错误的示例，它的工作方式如下：

1-您忘了扩展Component， 2-还用一个元素包装渲染（使用Recat.Fragment）

class InputField extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userInput: ''
    }
  }
  
  onClick = () => {
    this.setState({
      userInput: 'Test' 
    })
  }
  
  render() {
    return ( 
      <React.Fragment>
       <input value={this.state.userInput} name="sampleInput"/>
 <button onClick={this.onClick}>Click me</button>
      </React.Fragment>
    )
  }
}

ReactDOM.render( < InputField / > , document.getElementById("div"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="div"></div>

Answer 5

我只是解决了您的语法错误，它没有任何错误

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

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

5 个答案:

修复语法