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

Question

我知道如何使用一个输入文本字段创建名称列表。如何创建具有名字输入字段和姓氏输入字段的人员列表。因此，您如何使用由姓氏和名字组成的多个输入值来创建人员列表。我如何在 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")
)

Answer 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，所有部分都放在一起。