Question

我正在尝试允许文本区域采用名称列表，并在页面上显示名称提交。但是，我希望用户每行只能提交一个名称。

该如何处理？更具体地说，人们将如何抓住换行符并将其拆分为一个数组，该数组将被映射并显示在dom元素中。

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

谢谢！

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;

Answer 1

类似这样的东西：

@client.command(pass_context=True)
async def idle(ctx, *,text):
    await client.change_presence(game=discord.Game(name=text),
                                 status=discord.Status('idle'),
                                 afk=True)
    await client.send_message(ctx.message.channel, 'Bot is Idle')

并更改按钮的显示方式：

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

Answer 2

此代码最适合您：

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并将name作为参数传递。

剩下要做的就是使用handleSubmit中的这些名称。

React.js-从一个文本区域提交多行

2 个答案: