Кнопка отправки занимает 2 клика для генерации вывода - PullRequest
Новая
       13

Кнопка отправки занимает 2 клика для генерации вывода

1 голос
/ 21 апреля 2020

Я пытаюсь обновить состояние в реакции только после отправки формы. У меня есть одна форма html, в которой есть 1 ввод текста и кнопка отправки, но для изменения состояния в реакции требуется 2 нажатия кнопки подтверждения. Я использую 2 метода handleSubmit и handleChange.

handleChange найдите изменения в поле ввода и соответственно обновите состояние.

handleSubmit добавьте обновленное состояние handleChange в массив при отправке формы

и состояние содержит {itemslist: [], currentitem: ""}

, когда 1-й раз при нажатии кнопки отправки он возвращает предыдущее значение элемента (или пустой массив), а во 2-й раз - массив со значением, присутствующим на входе поле.

ниже мой полный код 

import React from 'react';

class App extends React.Component{
  constructor(){
    super()
    this.state = {
      currentitem: '',
      itemslist: []
    }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }


  handleSubmit(event){
    event.preventDefault();
    this.setState((prevState) => {
      return{
        itemslist: prevState.itemslist.concat([this.state.currentitem])
      }
    })

    console.log(this.state.items)
  }

  handleChange(event){
    const {name, value} = event.target
    this.setState({ [name] : value })
    console.log(this.state.currentitem)
  }


  render(){
    return(
      <div>
        <form onSubmit={this.handleSubmit} >
          <input type='text' placeholder='enter text' name='currentitem' onChange={this.handleChange} value={this.state.currentitem} />
          <button type='submit'>Submit</button>
        </form>
      </div>
    )
  }
}

export default App;

Ответы [ 2 ]

2 голосов
/ 21 апреля 2020

Этот ответ может немного отличаться от вашего кода, но так он будет работать. Установите тип кнопки на кнопку и заставьте кнопку обрабатывать отправку, а не форму. Затем измените функцию handleSubmit на то, что у меня есть. Я пробовал, и это работает!: 

import React from 'react';

class App extends React.Component{
  constructor(){
    super()
    this.state = {
      currentitem: '',
      itemslist: []
    }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }


  handleSubmit(e){
    e.preventDefault();
    const { currentitem, itemslist } = this.state;
    const newArray = [
      ...itemslist,
      currentitem
    ];
    this.setState({ itemslist, newArray });
  }

  handleChange(event){
    const {name, value} = event.target
    this.setState({ [name] : value })
    console.log(this.state.currentitem)
  }


  render(){
    return(
      <div>
        <form>
          <input type='text' placeholder='enter text' name='currentitem' onChange={this.handleChange} value={this.state.currentitem} />
          <button type='button' onClick={this.handleSubmit}>Submit</button>
        </form>

        // In cas eyou want to see the values in the array+
        {
            this.state.itemsList.map((item) => <p>{item}</>)
        }
      </div>
    )
  }
}

export default App;
0 голосов
/ 22 апреля 2020

setState функция асинхронная в реакции, поэтому вы не можете получить обновленное значение немедленно. Но если вам нужно получить последнее обновленное значение из состояния, вы должны использовать функцию callback из setState . 

this.setState({items: newItems}, () => { console.log(); })

Я изменил ваш пример, как показано ниже: выполнить ваше требование. 

import React from 'react';

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            currentitem: '',
            items: []
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
        event.preventDefault();
        this.setState((prevState) => {
            return {
                items: prevState.items.concat([this.state.currentitem])
            }
        }, () => {
            console.log(this.state.items)
        });
    }

    handleChange(event) {
        const {name, value} = event.target;
        this.setState({[name]: value});
        console.log(this.state.currentitem);
    }


    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input type='text' placeholder='enter text' name='currentitem' onChange={this.handleChange}
                           value={this.state.currentitem}/>
                    <button type='submit'>Submit</button>
                </form>
            </div>
        )
    }
}

export default App;
...