Question

我创建了一个反应应用程序，我想在每个按钮点击时渲染一个组件。但我只能做一次。

class AddForm extends React.Component{
constructor(props){
  super(props);
  this.state={
    anotherForm:false,
  }
  this.newForm=this.newForm.bind(this);
}
newForm(){
  this.setState({
    anotherForm:true
  })
}
render(){
return(
  <div>
    <button onClick={this.newForm}>AddForm</button>
    <EducationDetails/>
    {this.state.anotherForm?<EducationDetails/>:null}
  </div>
)
}
}

只要单击AddForm按钮，就会呈现组件EducationDetails。但我无法弄明白。

Answer 1

这是一个有效的jsfiddle

假设这是您的教育详细信息组件。

 class EducationDetails extends React.Component {
      constructor(props) {
        super(props);
      }

      render() {
        return (<div>
             <p>FirstName: <input type="text" value={this.props.value || ''} /></p>
               <p>LastName:  <input type="text" value={this.props.value || ''} /></p>
              </div>
        );
      }
    }

在您的AddForm组件中，您可以有一个计数，每当您点击添加更多按钮增加您的计数并根据您的计数状态显示教育详细信息表单。

class AddForm extends React.Component {
   constructor(props) {
            super(props);
            this.state = {value: [], count: 1}; //initial you'll have one form
          }

          addMore(){
            this.setState({count: this.state.count+1})//on click add more forms
          }

          displayForm(){
             let forms = [];
             for(let i = 0; i < this.state.count; i++){
                       forms.push(
                       <div key={i}>
                           <EducationDetails value={this.state.value[i] || ''} />
                       </div>
                    )
             }
             return forms || null;
          }

          render() {
            return (
              <form >
                  {this.displayForm()}        
                  <input type='button' value='add more' onClick={this.addMore.bind(this)}/>
              </form>
            );
          }
        }

        ReactDOM.render(<AddForm />, document.getElementById('container'));

您也可以使用相同的概念删除表单，例如

removeClick(){ 
     this.setState({count: this.state.count - 1}) 
 }

在你的添加更多按钮下，添加另一个按钮以删除

<input type='button' value='remove' onClick={this.removeClick.bind(this)}/>

如何在每次点击按钮时渲染反应组件？

1 个答案: