将输入字段放入状态中的一个数组答案

【问题标题】：Put Input Fields to one array in state将输入字段放入状态中的一个数组
【发布时间】：2019-01-11 15:18:38
【问题描述】：

我有问题。我有 3 个输入字段，我想在其中放置链接。这 3 个输入字段在该状态下应该全部放在一个链接数组中。我是一个完全反应的新手。你能帮帮我吗？

export default class Dashboard extends Component {
    constructor() {
        super();

        this.state = {
            link : [],
        };

<Form onSubmit={this.handleSubmit} >
  <Input
      type="text"
      fluid
      label="Social Link 1"
      placeholder="www.twitter.com/artist"
      style={{ margin: "1rem" }}
      width={6}
      name="link"
      value={}
      onChange={this.handleInputChange}
  />
  <Input
      type="text"
      fluid
      label="Social Link 2"
      placeholder="www.twitter.com/artist"
      style={{ margin: "1rem" }}
      width={6}
      name="link"
      value={}
      onChange={this.handleInputChange}
  />
  <Input
      type="text"
      fluid
      label="Social Link 3"
      placeholder="www.twitter.com/artist"
      style={{ margin: "1rem" }}
      width={6}
      name="link"
      value={}
      onChange={this.handleInputChange}
  />

【问题讨论】：

标签： javascript node.js reactjs input semantic-ui

【解决方案1】：

JSX：

<Form onSubmit={this.handleSubmit} >
  <Input
      type="text"
      fluid
      label="Social Link 1"
      placeholder="www.twitter.com/artist"
      style={{ margin: "1rem" }}
      width={6}
      name="link0"
      value={this.state.links[0]}
      onChange={this.handleInputChange}
  />
  <Input
      type="text"
      fluid
      label="Social Link 2"
      placeholder="www.twitter.com/artist"
      style={{ margin: "1rem" }}
      width={6}
      name="link1"
      value={this.state.links[1]}
      onChange={this.handleInputChange}
  />
  <Input
      type="text"
      fluid
      label="Social Link 3"
      placeholder="www.twitter.com/artist"
      style={{ margin: "1rem" }}
      width={6}
      name="link2"
      value={this.state.links[2]}
      onChange={this.handleInputChange}
  />

组件方法：

handleInputChange(event) {
    // deep copy array
    var newLinks = this.state.links.slice()
    var whichOne = event.target.name
    switch (whichOne) {
       case ("link0"):
          newLinks[0] = event.target.value
          break
       case ("link1"):
          newLinks[1] = event.target.value
          break
       case ("link2"):
          newLinks[2] = event.target.value
          break
       // add in default case if you care to
    }
    this.setState({ links: newLinks })
}

handleSubmit(event) {
   // whatever you need to do with links 
}

构造函数：

constructor(props) {
   super(props)
   this.state = {
      // initial links, maybe all ""
   }
   this.handleSubmit = this.handleSubmit.bind(this)
   this.handleInputChange = this.handleInputChange.bind(this)
}

如果需要澄清，请发表评论，或者某些内容不起作用。 Ty Gl.

【讨论】：

首先感谢您的帮助。对我来说，不清楚在 switch 案例中 newState[0] 等是什么意思，我现在应该在状态中插入什么？
应该是newLinks，我只在一处编辑了变量名。哎呀。

【解决方案2】：

请在下面找到一种可能的实现方式。

export default class Dashboard extends Component {
    constructor() {
        super();

        this.state = {
            link : []
            input1Value: “”,
            input2Value:””,
            input3Value:””
        };
      }
  componentWillMount(){
    const input1 = <Input
      type="text"
      fluid
      label="Social Link 1"
      placeholder="www.twitter.com/artist"
      style={{ margin: "1rem" }}
      width={6}
      name="link"
      value={this.state.input1Value}
      onChange={event => this.handleInputChange(event, 1)}
  />
  const input2 = <Input
      type="text"
      fluid
      label="Social Link 2"
      placeholder="www.twitter.com/artist"
      style={{ margin: "1rem" }}
      width={6}
      name="link"
      value={this.state.input2Value}
      onChange={event => this.handleInputChange(event, 2)}
  />
  const input3 = <Input
      type="text"
      fluid
      label="Social Link 3"
      placeholder="www.twitter.com/artist"
      style={{ margin: "1rem" }}
      width={6}
      name="link"
      value={this.state.input3Value}
      onChange={event => this.handleInputChange(event, 3)}
  />

          //ES6 way
            this.setState({
                link: [...this.state.link, input1, input2, input3]
            });
        }

handleInputChange = (event, id) => {
     if(id == 1){
          this.setState({
              input1Value: event.target.value
           });
     }
       if(id == 2){
          this.setState({
              input2Value: event.target.value
           });
     }
        if(id == 3){
          this.setState({
              input3Value: event.target.value
           });
     }
     }

  render(){
      return(
        <div>
          <Form onSubmit={this.handleSubmit}>
            {this.state.link && this.state.link.length > 0 && this.state.link}
          </Form>
        </div>
      )
  }

【讨论】：