如何从输入组件获取值（研究目的）？

Question

我的问题是我正在尝试处理输入的值，用户通过 API 调用定义他想要的输入。

这是我获取值的地方：

 const handleClick = buttonTitle => async () => {
    await renderField(buttonTitle).then(response => {               
      navigation.navigate('FormScreen', {
        collectionKey: buttonTitle.slice(7),
        paramKey: JSON.stringify(response),
      });     
  });
  };

渲染字段是一个 API 调用，它返回我{"message": [{"_id": "618e4c23db08f70b719f3655", "author": "adicionarei posteriormente", "ceatedAt": "2021-11-12 08:12:32", "field": "abc", "fieldtype": "Text"}, {"_id": "618e4c9ddb08f70b719fae37", "author": "adicionarei posteriormente", "ceatedAt": "2021-11-12 08:14:35", "field": "Animal", "fieldtype": "Text"}]}

然后我有我的 Form 组件，我在其中获取一些需要的组件并向用户显示：

const FormScreen = ({route, navigation}) => {
  return (
    <Container>
      <InputBody route={route.params.paramKey} navigation={navigation} />
    </Container>
    // => handle submit Input it in here ?
  );
};

对于我的inputbody组件，我有以下代码（记住（body.map是 api 调用响应）：

  return (
    <>   
    {Object.keys(Body).length > 0 ? (     
      Body.map(item => (
        <React.Fragment key={uuid.v4()}><Texto>{item.field}</Texto>  
           {renderContent(item.fieldtype,item.field)}
        </React.Fragment>
      ))
    ) : (
      <ActivityIndicator size="large" color="#eb6b09" />
    )}
    </>
  )
}

然后我有我的 renderContent（其中我得到字段的类型为 astring以及字段的名称string）。

function renderContent(type,field) {
    switch(type) {     
      case 'Numeric':
      return <NumberInput key={field} keyboardType="numeric" />
     case 'Text':
      return <TextInput key={field} />
    }
  }

请记住：每种字段类型都可以出现多次。（例如：我可以有一个包含超过 1 个文本输入的表单），那么我的问题是：知道它可以有任何类型的 input( Numeric or Text) ，我该如何处理输入的值？

obs：我可以显示任何类型的信息。

Answer 1

    const Input = ({value,keyboardType,onChange})=>{
      return(
        <TextInput value={value} keyboardType={keyboardType} onChangeText={onChange} /> 
      )
    }


    const [payload,setPayload] = useState({});

    const onValue=(e,field)=>{
      let tempPayload = {...payload};
      tempPayload[field] = e;
      setPayload(tempPayload)
    }


    const renderComponent = (fieldObj)=>{
      switch(fieldObj.type):
        case "Text":
          return <Input keyboardType="default" onChange={(e)=>onValue(e,fieldObj.field)} value={payload[fieldObj.field]||""}/>
        case "Number":
          return <Input keyboardType="numeric" onChange={(e)=>onValue(e,fieldObj.field)} value={payload[fieldObj.field]||""} />
        case "Dropdown":
          return <Dropdown options={fieldObj.options} />  //if you want to add dropdown, radio buttons etc in future
    }

这个想法非常简单。将表单字段中的值存储在对象中payload。名称是字段的名称，例如。动物。该值是该字段的值。您还可以使用所有键及其值将对象初始化为空或从 api 获取的默认值。因此，如果我们渲染的字段是 Animal 和 Car。有效负载将是

{
  'Animal':'Tiger',
  'Car':'BMW'
}

这是使用 onValue 函数处理的。您还可以在此函数中添加验证。例如，如果您使用该字段的 api 传递正则表达式，则可以使用正则表达式验证该值。