Reactjs - отправка нескольких строк из одного текстового поля - PullRequest
Новая
       28

Reactjs - отправка нескольких строк из одного текстового поля

0 голосов
/ 27 января 2019

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

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

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

Спасибо! 

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

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

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

  handleChange = (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.handleChange}
                  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;

Ответы [ 2 ]

0 голосов
/ 27 января 2019

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

import React, { Component } from 'react'

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

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

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

  handleChange = 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.handleChange}
                  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 и pass name в качестве аргумента.

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

0 голосов
/ 27 января 2019

Примерно так: 

handleChange = 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>
)}
...