Arrays Reactjs-从一个文本区域提交多行

我正在尝试允许textarea获取姓名列表，并在页面上显示姓名提交。但是，我希望用户每行只能提交一个名称

这件事怎么办？更具体地说，一个人如何抓住断线并把它们分成，比如说。。。要映射并显示在dom元素中的数组

在我的代码中，名称的状态是一个空字符串，但我认为如果它是一个数组，则更容易/更易于管理

谢谢

类内容扩展组件{
建造师（道具）{
超级（道具）；
此.state={
姓名：“
};
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
handleSubmit=（e）=>{
e、 预防默认值（）；
}
handleChange=（e）=>{
这是我的国家({
名称：e.target.value
});
}
render（）{
返回(
请输入姓名列表。
在页面顶部选择一个语言。
提交
{this.state.names}
您好，很高兴看到您回来
无名氏
您好，很高兴看到您回来
)
}
}
导出默认内容类似以下内容：

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>
)}

{this.state.submitNames.map(
（姓名）=>
this.handleSubmit（name）}
type=“按钮”
className=“nametag”
>
{name}
)}
此代码应该非常适合您：

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

import React，{Component}来自“React”
类内容扩展组件{
建造师（道具）{
超级（道具）
此.state={
名称：“”
}
this.handleSubmit=this.handleSubmit.bind（this）
this.handleChange=this.handleChange.bind（this）
}
handleSubmit=name=>{
警报（`Submitted name:${name}`）
}
handleChange=e=>{
这是我的国家({
名称：e.target.value
})
}
render（）{
返回(
请输入姓名列表。
在页面顶部选择一个语言。
提交
{this.state.names
.split（“\n”）
.filter（n=>n）//用于筛选空名称
.map（（名称、索引）=>(
this.handleSubmit（name）}
>
{name}
))}
您好，很高兴看到您回来
)
}
}
导出默认内容

我认为将
名称
状态保持为字符串更容易。
呈现名称时，在
\n
处拆分字符串，过滤掉空名称（基本上是那些没有名称的额外换行符），然后呈现其余的名称

单击这些名称按钮时，调用handleSubmit并将
name
作为参数传递

所以剩下的事情就是你想在
handleSubmit
中对这些名字做些什么。嘿，谢谢你的回复。实际上我刚刚尝试过这个方法，效果很好。至于你提到的按钮，它只是一个没有用的UI按钮。但是，表单的“提交”按钮已被使用。