I have a functional component in which I am trying to clear a TextInput on submit. Sometimes the onChangeText callback is called after onSubmitEditing, so the input is not clear after submitting. Most often this happens due to autocorrect, but sometimes happens with random strings that were not autocorrected. How do I make sure the input is cleared consistently?
Code: https://snack.expo.io/hy4dKvvnr
export default function App() {
const [inputValue, setInputValue] = useState('');
return (
<View style={styles.container}>
<TextInput
style={styles.input}
value={inputValue}
onChangeText={(value) => {
console.log('CHANGE TEXT', value);
setInputValue(value);
}}
blurOnSubmit
onSubmitEditing={() => {
console.log('SUBMIT TEXT');
setInputValue('');
}}
/>
</View>
);
}
Console logs:
iPhone 8: CHANGE TEXT Kdjgw
iPhone 8: SUBMIT TEXT
iPhone 8: CHANGE TEXT Kdjgw
Related
I am using a state to store the text and update it as typed. The value of the TextInput is then changed as the state is changed. This works as a packaged app but not in a an ios browser. Please let me know if there is a better way to implement this or make it work. Thank you.
const function1 = (props) => {
const [text, setText] = useState("");
return (
<View>
<TextInput
style={styles.textInput}
onChangeText={(t) => setText(t)}
placeholder="placeholder..."
value={text}
autoCorrect={false}
autoCapitalize="words"
onSubmitEditing={() => {
doSomething(text);
setText("");
}}
/>
<View/>
);
};
Im trying to set a state with the values from a textinput (which is a reusable component), Im using onChangeText to setFieldValue (useFormikContext()), I also want to set a state which will be sending to the Parent component. I tried using onChange but noticed it saves the text without the last word/number, for instance if I type 0123456789, the setFieldValue gets 0123456789, but the other one (with onChange) gets only 012345678 (without 9).
Here is the code:
function AppFormField({ name, width, childToParent, ...otherProps }) {
const { setFieldTouched, setFieldValue, errors, touched, values } =
useFormikContext();
return (
<>
<TextInput
onBlur={() => setFieldTouched(name)}
onChangeText={(text) => setFieldValue(name, text)}
onChange={() => childToParent(bn)}
value={values[name]}
width={width}
{...otherProps}
/>
<ErrorMessage error={errors[name]} visible={touched[name]} />
</>
);
}
Parent Component:
...
const [bn, setBN] = useState("");
const childToParent = (childdata) => {
setBN(childdata);
console.log(childdata);
};
console.log("bn");
console.log(bn);
...
return (
...
<UppFormField
keyboardType="numeric"
autoCorrect={false}
// icon="bank"
name="acct_number"
placeholder="Account Number"
style={{ paddingRight: 50 }}
childToParent={childToParent}
/>
...
)
Make a middle function called
const onTextChange = (text) => {
setFieldValue(text)
parentFunction(text)
}
then TextInput takes has
onChangeText={onTextChange}
So my app demands the use of slider whose value can be given by sliding or by text box and viceversa . I am not able to understand whenever i am printing value in text its printing but when i put it inside text box its not printing ,same whenever i am typing number in text box slider value is not changing.
Here is my code
export const Slider = props => {
const [value, setValue] = useState();
// const [isTouchEnded, setIsTouchEnded] = useState(false);
return (
<View style={styles.content}>
<Slider
style={styles.slider}
minimumValue={0}
maximumValue={100}
value={value}
minimumTrackTintColor="#00E487"
maximumTrackTintColor="#00E487"
onValueChange={e => setValue(e)}
step={1}
/>
<View>
<TextView>{value}</TextView>
<TextBoxInput
testID="tiDimLevel"
style={styles.textBox}
keyboardType="numeric"
value={value}
returnKeyType="next"
onChangeText={e => setValue(e)}
maxLength={3}
/>
</View>
</View>
);
[slider with editable textbox whenever i am editing the text box slider value is
setting to 0 Expected is slider also should move to 58]};
Pass a ref to slider and then create a useEffect like this:
useEffect(() => {
sliderRef.current.setNativeProps({ value: +value });
}, [value])
This is the text input that I am using, I want the input field to be disabled after entering a value.I tried using editable props, but it did not help.
I am completely new to react native, please help with an example.
<View style={editProfileStyle.textinputView}>
<TextInput
style={editProfileStyle.textInput}
placeholder="Enter your Specialization"
value={this.state.subQualification}
onChangeText={subQualification => this.setState({ subQualification: subQualification })}
/>
</View>
As per the question, since the field should get disabled when it has some value:
<View style={editProfileStyle.textinputView}>
<TextInput
editable={this.state.subQualification.length === 0}
style={editProfileStyle.textInput}
placeholder="Enter your Specialization"
value={this.state.subQualification}
onChangeText={subQualification => this.setState({ subQualification: subQualification })}
/>
</View>
using check in your editable prop of
editable={this.state.subQualification.length === 0} will make field editable when nothing in present in the field
Try to add state and modify your textInput props like this:
state ={
textDisable: true
}
render() {
return (
<View style={editProfileStyle.textinputView}>
<TextInput
style={editProfileStyle.textInput}
placeholder="Enter your Specialization"
value={this.state.subQualification}
onChangeText={subQualification => this.setState({ subQualification: subQualification })}
editable={this.state.textDisable}
onEndEditing={() => this.setState({textDisable: false})}
/>
</View>
);
}
}
after onsubmit the input should be disable.
I have just placed TextInput KeyboardType ={"numeric"} just trying to find weather user enter '-' if means I have to event.preventDefault() in OnChange first.Later tried in onKeyPress but onKeyPress is not trigerring , I was just tried to do that but it allowing me to type shows warning Synthetic Event Performance issue.
guys help me .
You are testing with android mobile whereasonKeyPress method is for iOS, check documentation for same
You can use onChangeText for text change.
Example:
<TextInput
onChangeText={(text) => this.onFirstNameText(text)}
returnKeyType={'next'}
underlineColorAndroid='transparent'
style={styles.inputColLeft}
/>
Edit 2018
onKeyPress is now also supported for Android devices as per this commit.
From doc:
Note: on Android only the inputs from soft keyboard are handled, not
the hardware keyboard inputs.
const App =()=>{
const handleKeyPress = ({ nativeEvent: { key: keyValue } }) => {
console.log(keyValue);
if(keyValue === 'Enter')
{
console.log("enter");
}
};
return(
<View>
<TextInput
placeholder="Your Password"
placeholderTextColor="#666666"
style={styles.inputSearch}
// onEndEditing={(e)=>handleValidUser(e.nativeEvent.text)}
onKeyPress={handleKeyPress}
/>
</View>
)
}
Use onChangeText like this:
<TextInput onChangeText = {(text) => this.getPhone(text)} keyboardType="numeric" autoCapitalize="none" autoCorrect={false} onSubmitEditing={ () => this.addressInput.focus()} style={styles.input} placeholder="phone" placeholderTextColor="rgba(255,255,255,0.6)" underlineColorAndroid="rgba(0,0,0,0.0)" returnKeyType="next"/>
getPhone = (text) => {
this.setState({phone: text})
//use your logic here
}
Here is the solution to this issue of synthetic event:
Input element:
<Input onKeyPress = {this.keyPress} />
keyPress function
keyPress = (event) => {
/* this line will solve your error */
event.persist();
console.log(event);
}