This is my Text tag in react native i want to change its input value which is "abc" to "123" or any other string with the help of refs. edit()
{
this.refs.ref1
}
<Text ref="ref1" onPress={this.edit.bind(this)}>abc</Text>
What is can use in edit function to change string in Text
You can put the text in the state and update the state onPress, which will trigger react to update the ui:
constructor(props) {
super(props)
this.state = {mytext:'abc'}
}
edit() {
this.setState({mytext:'123'})
}
render() {
return <Text ref="ref1" onPress={this.edit.bind(this)}>{this.state.mytext}</Text>
}
If you need to use a reference, then put a reference on the component that renders your Text and call this.ref1.setState({mytext:'something'}) to dynamically change the text.
Related
I am trying to add custom prop to <Pressable/>. The solution I tried is:
type StyledButtonProps = {
correct: boolean,
clicked: boolean
}
const button = () => <Pressable></Pressable>
const StyledButton = React.cloneElement(button, {correct, clicked}) //Here this error comes at "button":
Argument of type '() => JSX.Element' is not assignable to parameter of type
'ReactElement<{ correct: [boolean, Dispatch<SetStateAction<boolean>>];
clicked: [boolean, Dispatch<SetStateAction<boolean>>]; }, string |
JSXElementConstructor<...>>'
And I will use it like this:
render(
<StyledButton onPress={...} correct={...} clicked={...} />
)
Here also comes warning: JSX element type 'StyledButton' doesnot have any construct or call signatures.
I couldn't find similar case, any help?
In React, to customize and add logic to a component, we create a component that renders the original and adds the styling or logic.
So just create a new component that gets every prop that Pressable gets, and the new props.
import { Pressable, PressableProps } from "react-native";
interface StyledButtonProps extends PressableProps {
correct: boolean;
clicked: boolean;
}
const StyledButton = ({ correct, clicked, ...other }: StyledButtonProps) => { // other - any other prop
// ...
return <Pressable {...other} />; // This way you pass all original Pressable props
}
I am new to React Native, and currently have two text input boxes and I would like it that when I change one the value shown in the other also changes. But then you will be allowed to edit the second text input and this will in tune change the first one. And so on...
I have tried setting the placeholder as the value, then that will change as the first text input changes, but it only works until you edit the text box.
Essentially I cannot figure out a way to have a text input and output on top of each other.
state = { valueOne: '', valueTwo: '' }
changeValueOne = (valueOne) => {
this.setState({
valueOne,
valueTwo: `${valueOne}-foo`
})
}
changeValueTwo = (valueTwo) => {
this.setState({
valueOne: `${valueTwo}-bar`,
valueTwo
})
}
render() {
const { valueOne, valueTwo } = this.state
return (
<View>
<Input onChangeText={this.changeValueOne} value={valueOne} />
<Input onChangeText={this.changeValueTwo} value={valueTwo} />
</View>
)
}
The WebView##
## of react-native does not have property to find the currently active Element id to change the current state of container.
You will have to use WebView's injectJavascript function
An example of selecting the element id of a div and change the text:
class WebView extends Component{
focusOnDiv() {
this.webView.injectJavascript(`
var textField = document.getElementById("text-field");
textField.textContent = "New content";
`);
}
render() {
<WebView ref={webView => this.webView = webView}/>
}
}
I'm using React Native with NativeBase and would like to make the labels of my Picker more complicated than just one plain string of text.
But is it even possible to pass elements as the label, say multiple child elements wrapped in a single top-level element?
Or do Pickers only support plain text as labels?
As requested by bennygenel, here's a version of what I've tried:
export default class ThingPicker extends React.Component {
render() {
const {
initialThing,
things,
onThingChanged,
} = this.props;
const orderedThings = things.sort();
return (
<Picker
selectedValue={initialThing}
onValueChange={onThingChanged}>
{buildThingItems(orderedThings)}
</Picker>
);
}
}
function buildThingItems(orderedThings) {
let items = orderedThings.map(th => {
const it = th === "BMD" ? (<Text key={th} label={"foo"} value={"bar"}}>Hello</Text>)
: (<Picker.Item key={th} label={th} value={th} />);
return it;
});
}
Yes! It is possible, it just might not look very "right" for React/JSX code. Just create the elements you need and assign them to the label field:
function buildThingItems(orderedThings) {
let items = orderedThings.map(th => {
const it = (<Picker.Item
key={th}
label={currency === "BMD" ? (<Text>Hello</Text>) : th}
value={th} />);
return it;
});
}
How can I access variable bvar in the code below? Also, when would I declare variables as:
a) state
b) between constructor() and render()
c) inside render() - my understanding is that I'd set them here if a variable can change and I'd like to set it each time a component renders. So if I know something is not changing at all, it'd be a const and where would I set it?
import React, {Component} from 'react';
export default class App extends Component {
constructor(props) {
super();
// Set the initial grid in
this.state = {
value: 4,
xsquares: 10,
ysquares: 10
};
var bvar = "cat";
}
render() {
var avar = [
"Hydrogen",
"Helium",
"Lithium",
"BerylÂlium"
];
let cvar = "dog";
return (
// Add your component markup and other subcomponent references here.
<div>
<h1>Hello, World! {this.state.value}</h1>
<h2>{this.state.xsquares}</h2>
<h3>{avar[0]}</h3>
<h4>{this.bvar}</h4>
<h3>{cvar}</h3>
</div>
);
}
}
All variables display apart from bvar.
bvar declared inside your constructor is not accessible inside render() method. It is out of scope. As answered by Caleb, you would need to use instance variable: this.bvar = "cat"
When would I declare variables as:
a) state
Use state if changes in data should affect the view (e.g. store user location in state so that current temperature can be established and rendered based on this location). Also, state can be used in the logic found in other methods of your component (e.g. fetch background image based on user's current location).
b) between constructor() and render()
Variables declared inside other methods of your component are often used to temporarily store data coming, for example, from the state, props, input fields etc. These variables are only accessible within those methods, e.g.
constructor() {
...
}
onInputText() {
var accountNumber = this.refs.inputField.value;
this.props.handleInputText(accountNumber);
}
render() {
...
}
c) inside render()
Variables are often declared inside render() to temporarily store data held in state or props. These variables are only accessible inside render(), e.g.
class WelcomeScreen extends React.Component {
render() {
var userName = this.props.userName;
return (
<div>
Hello, { userName }!
</div>
);
}
}
To define bvar within the constructor you would need to declare it as
this.bvar = "cat"
import React, {Component} from 'react';
export default class App extends Component {
constructor(props) {
super();
// Set the initial grid in
this.state = {
value: 4,
xsquares: 10,
ysquares: 10
};
this.bvar = "cat";
}
render() {
var avar = [
"Hydrogen",
"Helium",
"Lithium",
"BerylÂlium"
];
let cvar = "dog";
return (
// Add your component markup and other subcomponent references here.
<div>
<h1>Hello, World! {this.state.value}</h1>
<h2>{this.state.xsquares}</h2>
<h3>{avar[0]}</h3>
<h4>{this.bvar}</h4>
<h3>{cvar}</h3>
</div>
);
}
}