如何获取已选中（复选框）的值并在本机反应中自动完成 textInput

Question

could you help me?, I'm developing with react native and typescript, I need to do this: I have a checkBox that tells the user to check if his name is the same as his credit card, if he clicks the checkbox, a TextInput with his name is autocompleted, if you don't click the checkbox that he can type his name. I have a variable like: user_name I don't have code because I don't know how to do it, but I think it goes something like this:

 const [checked, setChecked] = useState(false)
...
return(
            <CheckBox
              checked={setChecked}
              onPress={}
              checkedIcon='dot-circle-o'
              uncheckedIcon='circle-o'
              checkedColor='blue'
              uncheckedColor='blue'
            />


        <TextInput
          placeholder='Nombre completo'
          value={}
          onChangeText={}
)

Answer 1

This code should work (run the snippet for demonstration)

 const checkbox = document.getElementById('checkBox') var name = "Tom" var input = document.createElement('input') checkbox.addEventListener('change', (event) => { if (event.currentTarget.checked) { document.querySelector("body").appendChild(input) input.value = name } else { input.parentNode.removeChild(input); } })

 <input type="checkbox" id="checkBox"> <script src="script.js"></script>

Answer 2

We could implement this as follows under the assumption that the name of the credit card is available. Let us call it creditCardName .

My example uses react-native-checkbox and the standard TextInput component. If you are using a different component, then the overall pattern still stays the same.

const [isChecked, setChecked] = useState(false);
const [userName, setUserName] = useState('');

return (
    <CheckBox
        value={isChecked}
        onPress={(newVal) => setChecked(newVal)}
     />
     <TextInput
       editable={!isChecked}
       placeholder='Nombre completo'
       value={isChecked ? creditCardName : userName}
       onChangeText={setUserName}
     />
)

The key-parts are as follows:

1. Let the TextInput be editable if and only if isChecked is false, that is the CheckBox is unchecked.
2. Let value of the TextInput be the creditCardName if the CheckBox is checked and set it to the userName otherwise.