I have this reply button in my app where when a user press it, it will change the TextInput autoFocus to true. I set the autoFocus value to false as default value and keep it in a state. I see the state will change to true but it doesn't open the keyboard.
This is my TextInput :
<TextInput
autoFocus={this.state.textInputFocus}
selectTextOnFocus={true}
ref={ref => this.textInputRef = ref}
multiline = {true}
placeholder="Write a comment ..."
onChangeText={(postComment) => this.setState({postComment})}
value={this.state.postComment} />
Here is the function to change the state when reply button is pressed :
_openReplyBox(comment_id, commenter){
this.setState({ postComment: commenter, textInputFocus: true })
}
Accordinig to docs:
autoFocus: If true, focuses the input on componentDidMount. The default value is false
You can use refs to achieve the same functionality.
<TextInput
ref={"textRef"}
...
/>
In openReplyBox:
_openReplyBox(comment_id, commenter){
this.refs.textRef.focus();
this.setState({ postComment: commenter})
}
Related
Purpose:
After the keyboard pops up, a shortcut input box with the specified text appears above it. After clicking, the corresponding text such as"https://" or "www." will be appended to the dialog box.
Problem:
I can't get the value in the input dialog in real time and modify it by functions other than keyboard input.
effort made：
The dialog I'm using is referenced from react-native-dialogs。I can't find a way to pass state into the input area of this dialog.
Also didn't find a way to get the value of the live input.
I thought if there are other dialog components that support getting the value of the modified input, but I didn't find one.
Notice that the Dialog.Input of react-native-dialog is just a TextInput. Thus, we can achieve this as usual using the onChangeText callback and the value prop of TextInput.
Here is a minimal example.
const [visible, setVisible] = useState(false);
const [value, setValue] = useState("");
return (
<View style={styles.container}>
<Button title="Show dialog" onPress={() => setVisible(true)} />
<Dialog.Container visible={visible}>
<Dialog.Title>Please enter the url you want to bookmark</Dialog.Title>
<Dialog.Description>
Message - optional
</Dialog.Description>
<Dialog.Input onChangeText={setValue} value={value} />
<Dialog.Button label="Ok" onPress={() => setVisible(false)} />
<Dialog.Button label="Set Text via function" onPress={() => setValue("Hello World")} />
</Dialog.Container>
</View>
);
The state value will be updated while you are typing. You have access to it while the dialog is open. You can set the value manually by using the setValue function of the value state as usual. This can be done while the dialog is open.
Here is a little snack for showcasing.
I'm new to react-native. I'm using numeric keyboard type:
<TextInput style={styles.TextInputSecond} editable = {true} maxLength={3} keyboardType="numeric" ></TextInput>
It is showing . and - also on the keyboard.
How can I hide or disable (as , disabled) them from the keyboard?
Can you try this and check if it resolve your issue
keyboardType={Device.isAndroid ? "numeric" : "number-pad"}
or you can also Add
const onlyNumber = number.replace(/[^0-9]/g, "");
this.setState({
onlyNumber
});
TextInput's prop value
value={this.state.onlyNumber}
I'm using react-native-testing-library on a react-native-elements Input component. The component shows the clear button while editing.
How can I tap the clear button to test the side effects?
This doesn't work:
const addressField = component.getByPlaceholder("Address");
addressField.clear();
// TypeError: addressField.clear is not a function
You can use the clear option.
handleSearchClear = () => {
this.setState({ query: "" })
}
....
<Input
placeholder='BASIC INPUT'
onClear={this.handleSearchClear}
value={this.state.query}
/>
OR You can use ref
this.input.clear();
...
<Input
placeholder='BASIC INPUT'
ref={ref => {this.input = ref;}}
value={this.state.query}
/>
import React from 'react';
import {
View,
Text,
Button,
TextInput,
StyleSheet
} from 'react-native';
const username = null;
const SetupForm = ({onSubmit}) => {
this.handleUsernameInput = (text) => {
username = text;
}
this.handleSetupSubmit = (event) => {
onSubmit(event, username);
}
this.handleSkipSubmit = (event) => {
onSubmit(event, false);
}
return (
<View>
<Text>Enter username:</Text>
<TextInput
placeholder="Username"
maxLength={20}
onSubmitEditing={this.handleSetupSubmit}
onChangeText={this.handleUsernameInput}
style={{ marginLeft: 20, marginRight: 20 }}
/>
<View>
<Button
title="Select"
onPress={this.handleSetupSubmit}
color="#34A853"
disabled={username === null}
/>
<Button
title="Maybe Later"
onPress={this.handleSkipSubmit}
color="red"
/>
</View>
</View>
);
}
export default SetupForm;
I have an issue with this Setup Form. it features a username text box I am setting to the value the user enters. onChangeText={this.handleUsernameInput}
for the select button I have set disabled when username === null however this never becomes false when entering text into the text box.
the text box is set to set the username when typing and I can see in the console its working correctly when I press the submit via the keyboard button with the redux action
{type: "SETUP.REQUEST", username: "aaaaaaa"}
is there something I am doing wrong here that the button is not becoming enabled when the text is getting set by the this.handleUsernameInput method?
example gif:
http://i.imgur.com/OuMkxHA.gifv
I have to click the skip button after typing in a username to make the button enable (go green), I want this to enable whilst typing
Like mentioned in the Garrett's comment the component doesn't re-render because there's no prop or state change when you change the text input. You should change the functional component to a ES6 class and save the username into the state. There's an simple example of this in the TextInput's documention
I'm not sure about your skill level but React's documentation about state and lifecycle is a good read if you are new to React https://facebook.github.io/react/docs/state-and-lifecycle.html
Hi in my componentWillMount I set my states like this
componentWillMount(){
this.timeSheetData().then((timeSheetResponse)=>{
this.setState({comments:timeSheetResponse.comments});
this.setState({spentHours:parseInt(timeSheetResponse.hours)});
alert(this.state.spentHours);
});
});
In my view
I have the TextInput like this. I can't display the value on the TextInput but I can display the value on Text I don't know why it's happening
<TextInput keyboardType='numeric' onChangeText={(spentHours) =>this.setState({spentHours})}
value={this.state.spentHours} />
Input values need to be strings so you either need to remove parseInt in your componentWillMount method:
this.setState({ spentHours: timeSheetResponse.hours });
or in your template you need to convert the input value to a string with toString():
<TextInput
keyboardType='numeric'
onChangeText={spentHours => this.setState({ spentHours })}
value={this.state.spentHours.toString()}
/>