Пользователь React JS вводит значение в поле ввода при нажатии кнопки, чтобы отобразить значение

Question

Я работаю над простой реакцией JS, когда пользователь вводит значение в текстовое поле при нажатии кнопки. Я хочу увидеть значение, которое нужно установить.

Я вставляю код App.js, пожалуйста, не обращайте внимания на person.js. Я не использую его для своей задачи.

Не уверен, что когда я нажимаю на кнопку, это больше установка значения, я уверен, что я что-то здесь упускаю.

App.js

import React, { Component } from 'react';

class App extends Component {

constructor(props)
{
  super(props);
 this.state = 
 {

 };

 this.setValue = this.setValue.bind(this);

 }

 setValue = (event) =>
 {


  this.setState(
 {

   a:event.target.value
 }

    )
 }
render() {

    return (
      <div className="App">
        <button type="button" onClick={this.setValue}>Set value</button>
        <input type="text" value={this.changed}></input>
      </div>
    );
  }
}

export default App;

Answer 1

Обработчик события onChange должен находиться во входном элементе, чтобы получить введенное значение и установить его в состояние и передать состояние в качестве значения входному элементу.

Вы должны сделать что-то вроде ниже.

  constructor(props){
       super(props);
       this.state={
            value: “”
        }
   }

    setValue(event){
        this.setState({
            value: event.target.value
        });
     }

       <input type="text" onChange={this.setValue} value={this.state.value}></input>

Answer 2

Просто используйте управляемый вход, который сохраняет свое значение в состоянии при изменении. Чем использовать значение состояния по клику - обычно передают его родителю через onClick function prop:

class App extends React.Component {
  state = {
    value: ''
  }
  
  handleChange = ({ target: { value }}) => {
    this.setState({ value });
  }

  handleClick = () => {
    const { value } = this.state;
    const { onClick } = this.props;
    onClick(value);        
  }
  
  render() {
    const { value } = this.state;
    
    return (
      <div>
        <p>state: {`{ value: '${value}' }`}</p>
        <input value={value} onChange={this.handleChange} />
        <button onClick={this.handleClick}>Set value</button>
      </div>
    );
  }
}

const handleChildClick = value => alert(`"${value}" has been set in App`);

ReactDOM.render(<App onClick={handleChildClick} />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 3

Обычно вход должен иметь атрибут value, который используется для установки значения, обычно это происходит из состояния, и обработчик события onChange, который обновляет состояние при каждом изменении ввода.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Person from './Person';

class App extends Component {

constructor(props)
{
  super(props);
  this.state = {
    objects: [
      {coin: "bitcoin",price:6500},
      {coin: "saicoin",price:1},
      {coin: "vechain",price:4},
      {coin: "nano",price:3}
    ]
  };

  this.setValue = this.setValue.bind(this);

}

setValue = (event) => {
  this.setState({
    a:event.target.value
  });
}
render() {

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
        <button type="button" onClick={this.setValue}>Set value</button>
        <input type="text" value={this.state.a} onChange={this.setValue}></input>
          <h1>{this.state.objects[0].coin} {this.state.objects[0].price}</h1>
          <h1>{this.state.objects[1].coin} {this.state.objects[1].price}</h1>
          <h1>{this.state.objects[2].coin} {this.state.objects[2].price}</h1>
          <h1>{this.state.objects[3].coin} {this.state.objects[3].price}</h1>
          <h1>{this.state.a}</h1>

        </p>
      </div>
    );
  }
}
export default App;