Question

我是React的新手，正在构建表单。该表单包含一个由几个组件组成的集合。组件之一是文本字段。

我想创建一个按钮，该按钮在单击时仅添加无限量的相同文本字段组件。我对如何执行此操作感到困惑，无法在线找到任何信息。

到目前为止，我的代码是：

constructor(props) {
      super(props);
      this.handleClickDestination = this.handleClickDestination.bind(this);
    }

    static defaultProps = {
    }

    static propTypes = {
    }

    handleClickDestination() {
      console.log('click');
    }

    render() {

      const {
        className
      } = this.props;

        return (
          <div className={className}>
           <DestinationSearchInput />
           <Grid item margin="normal">
           </Grid>
           <Grid container spacing={12} alignItems="flex-end">
             <Button onClick={this.handleClickDestination} color="primary">
                Add another destination
              </Button>
           </Grid>
           <div>
             // extra <DestinationSearchInput /> components to go here
           </div>
           <DatePicker />
           <TravellerCounter />
          </div>
        );
    }
}

有人能为我指出如何实现这一目标的正确方向吗？

Answer 1

您可以使用状态让组件知道要渲染多少个目标字段

在这种情况下，我只是使用dummy项数组来多次渲染字段。

constructor() {
  this.state = {
     items: ['dummy']
  }
}
handleClickDestination() {
  this.setState({items: this.state.items.concat('dummy') })
}

render() {

  const {
    className
  } = this.props;

    return (
      <div className={className}>
       <DestinationSearchInput />
       <Grid item margin="normal">
       </Grid>
       <Grid container spacing={12} alignItems="flex-end">
         <Button onClick={this.handleClickDestination} color="primary">
            Add another destination
          </Button>
       </Grid>
       <div>
       // use this block here
       { 
          this.state.items.map((_, index) => 
            <DestinationSearchInput 
               key={index}
            />
          ) 
       }
       // use this block here
       </div>
       <DatePicker />
       <TravellerCounter />
      </div>
    );
}

或简单地使用数字，然后使用数字进行渲染

// in constructor
this.state = {items: 0}

// inside handle click
this.setState({items: this.state.items + 1})

// in render
new Array(this.state.items).fill(0).map((_,index) => 
    <DestinationSearchInput 
      key={index}
    />
)

Answer 2

我认为您可以这样做： onClick（）{this.setState（{textFields：[... text}））; onClick（）; }

在“渲染”方法上，您可以使用： const TextComponent = this.state.textFields.map（item =>。。。。
您的组件在这里

您也可以为组件放置随机位置。

React：如何使用onClick添加无限数量的组件？

2 个答案: