Question

我正在创建一个向导表单-用户正在创建字段，并且我想向他显示这些字段，所以我在父状态下具有“字段”列表，并且我想调用一个子组件（表示该字段）通过循环将其从父状态的“字段”列表中的一项传递给我-我正在为此而苦苦挣扎

传递的项目是JSON，其属性来自字段（名称，标签和类型）

class Wizard extends React. Component{

  constructor(props){
      super(props);
      this.state = {
          showCard:false,
          title:'',
          type:'',
          name:'',
          label:'',
          fields:[]
      };
  }
  
  render(){
      const result = Object.keys(this.state.fields).map((field, index) =>{
          return(
              <FieldsViewer
                  key={index} 
                  field={field}

              />
          )
          })
      return(
          <div className="ui segment">
          <form onSubmit={this.onFormSubmit} className="ui form"> 
              <div className="field">
                  <input 
                      className="ui header"
                      placeholder="Place your form title here"
                      type="text" 
                      value={this.state.title } 
                      onChange={(e)=>this.setState({title:e.target.value})}
                  />

                  <div>

                  <button 
                  style={{marginTop:"50px" }}
                  className="ui button"
                  onClick={this.CreateProperty}>
                      Add Field
                  </button>

                  </div>
                  {

                      this.state.fields.length>0 && {result}
                  }

                  </div>
          </form>
      </div>
      );
  }

}


const FieldsViewer=(props)=>{
    console.log(props);
    return(
        <div>
            {<label>
                {props.field}:
            <label>
            <input
            type={props.type}>
            </input> 
        </div>
    );
}

Answer 1

有了地图，您将为每个键而不是每个字段实例创建一个FieldsViewer。


const result = this.state.fields.map((field, index) =>{
          return(
              <FieldsViewer
                  key={index} 
                  field={field}

              />
          )
          })

然后将整个字段对象传递给FieldsViewer，这样就可以在该组件中以props.field.label props.field.type等形式对其进行访问。或者，您可能希望先将对象解构，然后再将其传递给子组件：


const result = this.state.fields.map((field, index) =>{
          return(
              <FieldsViewer
                  key={index} 
                  name={field.name}
                  label={field.label}
                  type={field.type}
              />
          )
          })

希望这会有所帮助。

如何将项目从状态列表传递到子组件？

1 个答案: