Question

我有问题。我有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}
  />

Answer 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。

Answer 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>
      )
  }

将输入字段置于一个数组中

2 个答案: