Reactjs — отправка нескольких строк из одной текстовой области

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

Как бы это сделать? В частности, как можно было бы захватить разрывы строк и разделить их, скажем, на... массив, который будет отображаться и отображаться в элементе dom.

В моем коде состояние имена представляет собой пустую строку, но я думаю, что было бы проще/более управляемо, если бы это был массив.

Спасибо!

class Content extends Component {
  constructor(props) {
    super(props);
    this.state = {
      names: ""
    };

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

  handleSubmit = (e) => {
    e.preventDefault();
  }

  handleChangeEvent = (e) => {
    this.setState({
      names: e.target.value
    });

  }

  render() {
    return (
      <section className = "flex">
        <div className = "content flex">

          <div className = "sandbox flex">
            <div className = "directions">
              <h1>Please enter a list of names.</h1>
              <h3>Select a langauge at the top of the page.</h3>
            </div>

            <form id = "nameForm" className = "names flex">
              <div className = "form-group">
                <textarea
                  id = "names"
                  name = "hard"
                  value = {this.state.names}
                  cols = {20}
                  rows = {20}
                  onChange = {this.handleChangeEvent}
                  wrap = "hard">
                </textarea>
              </div>
            </form>

            <button id = "formButton" form = "nameForm" type = "submit">Submit</button>

            <div className = "nametags flex">
              <div className = "nametags-group flex">
                <button type = "button" className = "nametag">{this.state.names}</button>
                <p className = "greeting">Hello there, happy to see you back!</p>
              </div>
              <div className = "nametags-group flex">
                <button type = "button" className = "nametag">John Doe</button>
                <p className = "greeting">Hello there, happy to see you back!</p>
              </div>
            </div>
          </div>

        </div>
      </section>
    )
  }
}

export default Content;

arrays reactjs forms textarea multiple-instances

27.01.2019 17:57

Структурированный массив Numpy

Однако в реальных проектах я чаще всего имею дело со списками, состоящими из нескольких типов данных. Как мы можем использовать массивы numpy, чтобы...

3 эффективных способа найти максимальное значение в массивах JavaScript

T - 1Bits: Генерация последовательного массива

По мере того, как мы пишем все больше кода, мы привыкаем к определенным способам действий. То тут, то там мы находим код, который заставляет нас...

Что такое деструктуризация массива в JavaScript?

Деструктуризация позволяет распаковывать значения из массивов и добавлять их в отдельные переменные.

1 904

Ответы 2

Что-то вроде этого:

handleChangeEvent = e => {
  this.setState({
    names: e.target.value,
    submitNames: e.target.value.split(/\r?\n/)
  });
};

И измените способ отображения кнопок:

{ this.state.submitNames.map(
   (name) => 
     <button
       onClick = {() => this.handleSubmit(name)}
       type = "button" 
       className = "nametag"
     >
      {name}
     </button>
)}

Эй, спасибо за ваш ответ. Я на самом деле только что попробовал этот метод, и он отлично работает. что касается кнопки, которую вы упомянули, это просто бесполезная кнопка пользовательского интерфейса. Однако кнопка отправки для формы используется.

— 27.01.2019 19:26

27.01.2019 19:17

Этот код должен отлично работать для вас:

import React, { Component } from 'react'

class Content extends Component {
  constructor(props) {
    super(props)
    this.state = {
      names: ''
    }

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

  handleSubmit = name => {
    alert(`Submitted name: ${name}`)
  }

  handleChangeEvent = e => {
    this.setState({
      names: e.target.value
    })
  }

  render() {
    return (
      <section className = "flex">
        <div className = "content flex">
          <div className = "sandbox flex">
            <div className = "directions">
              <h1>Please enter a list of names.</h1>
              <h3>Select a langauge at the top of the page.</h3>
            </div>

            <form id = "nameForm" className = "names flex">
              <div className = "form-group">
                <textarea
                  id = "names"
                  name = "hard"
                  value = {this.state.names}
                  cols = {20}
                  rows = {20}
                  onChange = {this.handleChangeEvent}
                  wrap = "hard"
                />
              </div>
            </form>

            <button id = "formButton" form = "nameForm" type = "submit">
              Submit
            </button>

            <div className = "nametags flex">
              <div className = "nametags-group flex">
                {this.state.names
                  .split('\n')
                  .filter(n => n) // to filter out empty names
                  .map((name, index) => (
                    <button
                      key = {index}
                      type = "button"
                      className = "nametag"
                      onClick = {() => this.handleSubmit(name)}
                    >
                      {name}
                    </button>
                  ))}
                <p className = "greeting">Hello there, happy to see you back!</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    )
  }
}

export default Content

Я думаю, что проще сохранить состояние name в виде строки. При рендеринге имен разделите строку на \n, отфильтруйте пустые имена (в основном эти дополнительные новые строки без имен) и отобразите остальные.

При нажатии на эти кнопки с именами вызовите handleSubmit и передайте name в качестве аргумента.

Так что остальное, что вы хотите сделать с этими именами в handleSubmit.

27.01.2019 19:28