如何在本机反应中显示来自渲染动态输入字段的值

Question

I wan to get values when user click on button But my form fields is json that I dynamically created example is here https://snack.expo.dev/@john_marsh/form-data

Textfield

function Text_field(props) {
 return(
   <View key={props.block.keys}>
     <TextInput  
       style={styles.input}
       placeholderTextColor={'black'}
       defaultValue=""
       placeholder={props.block.label}
       type={props.block.type}/>
     {props.children}
   </View>
  );
}

Answer 1

you need to store your value, see controlled input

Answer 2

Try this:

const [respuestas, setRespuestas] = useState([]);
<TextInput
style={styles.input}
placeholderTextColor={'black'}
defaultValue=''
placeholder={props.block.label}
type={props.block.type}
onChangeText={(value) => {
  setRespuestas({ ...respuestas, [props.block.id]: value });
}}
/>

I declare a variable where I'm going to save all the values identified by an id. You will get an Object with the values. You can try saving values and print the object with console.log

Answer 3

Formik

Hey, I would really suggest you use Formik to handle Forms in React Native, it already gives you a lot of tools and helps you take all values from all inputs in a form. Give it a try, refactoring is easy too!

Here are the docs: https://formik.org/docs/guides/react-native