React Native - 根据其父答案处理动态表单 [英] React Native - Handling dynamic form depending on it's parent answer

问题描述

我有一个使用 JSObject 的简单状态，状态如下:

I have a simple state using JSObject, and the state look like:

pertanyaan: [{
    label: "label1",
    type: 'dropdown',
    key: 'keyFoo1',
    option: [{
        value: "foo1"
      },
      {
        value: "foo2",
        additional: {
          label: 'label1-1',
          type: 'date',
          key: 'keyFoo1-1',
          option:null
        }
      },
      {
        value: "foo3",
        additional:{
          label: 'label1-2',
          type: 'dropdown',
          key: 'keyFoo1-2',
          option:[
            {value:"Tidak ada orang"},
            {value:"Bertemu tetangga"},
          ]
        }
      },
    ]
  },
  {
    label: "Label2",
    type: 'dropdown',
    key: 'keyFoo2',
    option: [{
        value: "Rumah"
      },
      {
        value: "Tempat Kerja"
      },
    ]
  }
]

有了这些 JSObject，我想根据每个父母的回答来实现某种形式，

With those JSObject, i want to achieve some form depending on the answer of each parent,

示例:label1 有 3 个选项 ( foo1, foo2, foo3)，如果 foo3code>label1 是 foo2 我需要渲染 Date Component，如果 label1 回答 foo3 我需要渲染Dropdown Component,

Example: label1 has 3 option ( foo1, foo2, foo3), if the answer of label1 is foo2 i need to render Date Component, and if label1 answering foo3 i need to render Dropdown Component,

使用下面的代码，我可以使用 foo2 来渲染 label1 答案:

with below code I just can rendering label1 with foo2 answer:

renderVisit(){
  var renderin = this.state.pertanyaan.map((item, index)=>{
    if(this.state[item.key] == undefined){
      this.setState({[item.key]:item.option[0].value})
    }
    let data = item.option.filter((val)=>{return val.value == this.state[item.key]})[0]
    return(
      <View>
        {/*dropdown Component*/}
        <View key={index}>
          <CustomText>{item.label}</CustomText>
          <Picker
            mode="dropdown"
            selectedValue={this.state[item.key]}
            onValueChange={(itemVal)=> this.onChangePicker(item, index, itemVal)}
          >
          {item.option.map((itemPicker, indexPicker)=>{
            return(
              <Picker.Item label={itemPicker.value} value={itemPicker.value} key={indexPicker} color={Color.blue_900}/>
            )
          })}
          </Picker>
        </View>
        {data!=undefined && data.additional!=undefined &&
          {/*dateComponent*/}
          <View>
            <CustomText>{data.additional.label}</CustomText>
            <TouchableOpacity onPress={()=>this.openDate(data.additional)}>
              <CustomText>{this.state[data.additional.key] == undefined? "Select Date" : new Date(this.state[data.additional.key]).toDateString()}</CustomText>
              <MaterialCommunityIcons name="calendar" size={34} />
            </TouchableOpacity>
          </View>
        }
      </View>
    )
  })
  return renderin
}

任何人都可以帮助我实现目标并使代码更具可读性?

anyone can help me to achieve my goal and makes the code more readable?

推荐答案

这是我如何实现下拉组件的动态选择的方式.您可以通过将组件本身作为另一个下拉列表的子项传递来递归地使用 DropDown 组件；

This is the way how I would implement the dynamic selection of a dropdown component. You can use the DropDown component recursively by passing the component itself as a child of another dropdown;

const Date = () => 'Date Component';
const Foo = () => 'Foo';
const Bar = () => 'Bar';

class ListItem extends React.Component {
  handleClick = () => {
    const { option: {id}, onClick } = this.props;
    onClick(id);
  }
  
  render(){
    const { option: { label } } = this.props;
    return (
      <li onClick={this.handleClick}>{label}</li>
    )
  }
}

class DropDown extends React.Component {
  state = {
    selectedOption: null
  }
  
  handleOptionClick = optionId => {
    const { options } = this.props;
    this.setState({ selectedOption: options.find(option => option.id === optionId).child });
  }
  
  render(){
    const { selectedOption } = this.state;
    const { options } = this.props;
    return (
      <ul>
        {options.map(option => (
          <ListItem
            option={option}
            onClick={this.handleOptionClick}
          />
        ))}
        {selectedOption}
       </ul>
     )
  }
}

const DropDownOptions = [
  {id: '1', label: 'label-1', child: <Date />},
  {id: '2', label: 'label-2', child: <DropDown options={[
    {id: '2-1', label: 'label-2-1', child: <Foo />},
    {id: '2-2', label: 'label-2-2', child: <Bar />}
  ]} />}
]

ReactDOM.render(<DropDown options={DropDownOptions} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

这篇关于React Native - 根据其父答案处理动态表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！