Question

我知道如何使用一个输入文本字段创建名称列表。如何创建具有名字输入字段和姓氏输入字段的人员列表。因此，如何使用包含姓氏和名字的多个输入值创建人员列表。我如何在react.js中执行此操作？

John Carter
Adam West
Mark Hamill
Stan Lee
Peter Parker
Clark Kent

现在，我现在只使用一个输入字段创建如下所示的列表：

约翰
亚当
标记
斯坦
彼得
克拉克

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

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

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

1 个答案: