Reactjs: как я могу распечатать элемент выбора на своей веб-странице?

Прежде всего, я новичок в reactjs. Как распечатать элемент выбора на моей веб-странице? Этот код печатает вывод в консоли, но я хочу распечатать вывод на экране веб-страницы. Как я могу это сделать?

´´´´

import React from 'react';

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChangeEvent = this.handleChangeEvent.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  handleSubmit(event) {
    console.info('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit = {this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value = {this.state.value} onChange = {this.handleChangeEvent}>
            <option value = "grapefruit">Grapefruit</option>
            <option value = "lime">Lime</option>
            <option value = "coconut">Coconut</option>
            <option value = "mango">Mango</option>
          </select>
        </label>
        <input type = "submit" value = "Submit" />

      </form>
    );
  }
}

export default FlavorForm

´´´´

reactjs

25.03.2019 01:07

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Ответы 2

Просто добавьте какой-нибудь html-элемент, связанный с вашим свойством «значение», например:

render() {
    return (
        <div>
            <h3>Flavor: {this.state.value}</h3>
            <form onSubmit = {this.handleSubmit}>
                <label>
                    Pick your favorite flavor:
              <select value = {this.state.value} onChange = {this.handleChangeEvent}>
                        <option value = "grapefruit">Grapefruit</option>
                        <option value = "lime">Lime</option>
                        <option value = "coconut">Coconut</option>
                        <option value = "mango">Mango</option>
                    </select>
                </label>
                <input type = "submit" value = "Submit" />

            </form>
        </div>
    );
}

Большое спасибо. Но я хочу показать результаты после нажатия кнопки отправки. Как я могу это сделать?

— 25.03.2019 01:53

Покажите результаты где? Значение state.value изменяется при каждом событии onChange, поэтому любой связанный с ним html-элемент будет отображать результат независимо от отправки формы. Я думаю, что ваше замешательство происходит из-за непонимания того, что React является «декларативным». Вы можете прочитать об этом здесь: codeburst.io/declarative-vs-imperative-programming-a8a7c93d9‌ad2

— 25.03.2019 02:05

25.03.2019 01:18

Не уверен в точном поведении, которое вы хотите, но вы можете сохранить логическое значение, которое показывает ваше состояние, которое показывает/скрывает текст:

import React from 'react';

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'coconut',
      showFlavor: false // this controls whether or not the text is shown
    };

    this.handleChangeEvent = this.handleChangeEvent.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  handleSubmit(event) {
    // console.info('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
    this.setState({ showFlavor: true }); // toggle on our boolean, note that in this example it never gets set back to false
  }

  render() {
    return (
      <form onSubmit = {this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value = {this.state.value} onChange = {this.handleChangeEvent}>
            <option value = "grapefruit">Grapefruit</option>
            <option value = "lime">Lime</option>
            <option value = "coconut">Coconut</option>
            <option value = "mango">Mango</option>
          </select>
        </label>
        <input type = "submit" value = "Submit" />

        // text appears here only when state.showFlavor is true
        <span>{this.state.showFlavor ? `Your favorite flavor is: ${this.state.value}` : ''}</span>
      </form>
    );
  }
}

Спасибо. Это то, что я ожидаю в качестве вывода. Большое спасибо

— 25.03.2019 17:36

25.03.2019 02:08