如何从 React.js 中的多个输入输入字段创建列表？

Posted 2023-02-23

【中文标题】如何从 React.js 中的多个输入输入字段创建列表？

【英文标题】：How do I create a list from multiple input input fields in React.js?

【发布时间】：2018-06-18 03:35:08

【问题描述】：

我知道如何使用一个输入文本字段创建名称列表。如何创建具有名字输入字段和姓氏输入字段的人员列表。因此，您如何使用由姓氏和名字组成的多个输入值来创建人员列表。我如何在 react.js 中做到这一点？

约翰·卡特 亚当·韦斯特 马克·哈米尔 斯坦·李 彼得·帕克 克拉克·肯特

现在，我现在才知道如何只使用一个输入字段来创建如下列表：

约翰 亚当 马克 斯坦 彼得 克拉克

此时不需要每个名称前的点。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function PostButton(props)
    var style = 
        width:24,
        height:24
    
    return (
        <button style = style onClick =  () => props.handleClick()>props.label</button>
    )

function PostText(props)
    var style = 
        border:"1px solid black",
        width: props.width
    
    return (
        <div style = style>props.text</div>
    )

function Post(props)
    var style = 
        display:"flex"
    
    return (
        <div style = style>
            <PostButton label = "x" handleClick = props.removeItem/>
            <PostTextFirstName text = props.firstName width = "200"/>
            <PostTextLastName text = props.lastName width = "200" />
        </div>
    )


function PostList(props)
    return (
        <ol>
        
            props.postList.map((item,index) => 
                <Post key = index 
                      firstName = item.firstName 
                      lastName = item.lastName
                      removeItem = () => props.removeItem(index)
                />
             )
         
        </ol>
    )  


class App extends React.Component
    constructor(props)
        super(props)
        this.state = value:"", items : []
     
    handleChange(event)
        this.setState(value:event.target.value)
        console.log(this.state.value)
    
    addItem()
    
        var itemsCopy = this.state.items.slice()
        var truncatedString = this.state.value.substring(0,20);
        itemsCopy.push("firstName":truncatedString)
        this.setState(items:itemsCopy,value:"")
    
    removeItem(index)
    
        var itemsCopy = this.state.items.slice()
        itemsCopy.splice(index,1);
    
        this.setState(items:itemsCopy)
    
    render()
        return (
            <div>
                <div>First Name</div>
                <input value = this.state.value onChange = this.handleChange.bind(this)/>
                <div>Last Name</div>
                <input value = this.state.value onChange = this.handleChange.bind(this)/>
                <button onClick =  () => this.addItem()>Submit</button>
                <PostList postList = this.state.items 
                          removeItem = this.removeItem.bind(this)
                />
            </div>
        )
    


ReactDOM.render(
    <App/>,
    document.getElementById("root")
)

【问题讨论】：

不确定我是否理解您的问题。您想根据表单的连续提交创建人员列表（名字 + 姓氏），还是希望能够将新的名字/姓氏输入字段对附加到您的表单中？

我在问题中添加了更多细节。我知道如何通过单个输入字段添加名字并建立一个名字列表。如何使用名字的输入字段和姓氏的输入字段来建立具有名字和姓氏的人员列表。我只知道如何使用一个输入字段。我不知道如何使用两个输入字段来做到这一点。我需要建立一个包含名字和姓氏的人员列表，而不仅仅是他们的名字。

一个简单的搜索：***.com/questions/35965275/…

【参考方案1】：

你的一般原则是正确的，你的大错误是用一个状态变量处理两个单独的文本字段。显然，当你这样做时，你会在设置姓氏时覆盖名字，反之亦然。

以下是您需要进行的更改：

class App extends React.Component 
  constructor(props) 
    super(props);

    this.state = 
      firstname: "",
      lastname: "",
      items: []
    ;
  

  handleChange(event) 
    if (event.target.name === "firstname") 
      this.setState( firstname: event.target.value );
     else if (event.target.name === "lastname") 
      this.setState( lastname: event.target.value );
    
  

  addItem() 
    this.setState(
      items: [ 
        ...this.state.items, 
        
          firstName: this.state.firstname,
          lastName: this.state.lastname
        
      ],
      firstname: "",
      lastname: ""
    );
  

  removeItem(index) 
    const items = this.state.items.filter((e, idx) => idx !== index); 
    this.setState( items );
  

  render() 
    return (
      <div>
        <div>First Name</div>
        <input
          name="firstname"
          value=this.state.firstname
          onChange=this.handleChange.bind(this) />
        <div>Last Name</div>
        <input
          name="lastname"
          value=this.state.lastname
          onChange=this.handleChange.bind(this) />
        <button onClick=() => this.addItem()>Submit</button>
        <PostList
          postList=this.state.items
          removeItem=this.removeItem.bind(this) />
      </div>
    );
  

注意，我使用每个输入的name 属性来决定在状态下改变哪个对应的变量。另一种可能性是创建 2 个不同的函数，一个用于处理 firstName 文本更改，另一个用于处理 lastName 文本更改。

我还使用一些 ES6 语法简化了您的 addItem 和 removeItem 方法。

如您所见，该方法与您使用的方法相同，只是分别处理名字和姓氏。

这里是a CodeSandbox，所有部分都放在一起。

【讨论】：

只是想知道为什么我以前的函数像 PostButton 被转换为 const。

import ReactDOM from 'react-dom' 有什么区别； vs import render from 'react-dom';

将 PostButton 从函数转换为分配了“箭头”函数的 const 只是使用 ES6 语法，但在行为上并没有真正的区别。 import ReactDOM from 'react-dom'; 然后使用 ReactDOM.render(); 和 import render from 'react-dom'; 然后使用 render(); 之间也没有区别。在一种情况下，我们导入整个模块，然后使用该模块中的命名方法，在另一种情况下，我们直接导入命名方法，但最终结果完全相同。