I want to pass id or key values onChangeText but it or i can only pass text value from Input TextField. How do i pass both id and text
<Input
id={i}
key={i}
placeholder={`Question ${i}`}
onChangeText={(e) => this.editQuestion(e)}
/>
You can use function currying to do this.
First, set up your function inside the class to take the ID as a parameter and return a function that takes the event as a parameter:
editQuestion = id => e => {
console.log(id);
console.log(e);
}
Then you can call it like this:
<Input
id={i}
key={i}
placeholder={`Question ${i}`}
onChangeText={this.editQuestion(i)}
/>
HackerNoon have a good article on this if you're interested in learning more.
Related
How would "item" know that it has the data from the Data properties? I mean I passed in the data using the data properties of Flatlist component and it seems I can give any name to the keyExtractor property and it will know to get the data from the data property. Is there any explanation for this? Thanks a lot and in advance.
<Flatlist
data={someData}
keyExtractor={item => item.TitleID}/>
I'll give you a briefly introduction and an example of what callback functions are and how to use them.
Basically you can define a function and it's parameters with any types. By that, you can also expect functions as parameters (those are also called higher order functions) and call them inside the parent function at any time you wish. Look at this and especially at the lambda calculus.
function bar(something) {
console.log(something);
}
function foo(callback) {
callback("Hello");
}
// This will generate the output 'Hello'.
foo(bar);
// This is the same, but using lambda calculus.
foo(something => console.log(something));
As you can see, you can pass function definitions as parameters to other functions. This is exactly, what your example is doing. I also give you an extra example.
import React from "react";
const FlatList = ({ keyExtractor, data, ...props }) => {
return (
<ul>
{data.map((item, index) => (
<li key={index}>{keyExtractor(item)}</li>
))}
</ul>
);
};
export default FlatList;
Here I tried to mockup the FlatList of your example. You can see the data.map call, which acts as the higher order function from the previous example. The FlatList component has a property called keyExtractor, which will be called for each element of the data property. Now, you can easily provide keyExtractor as follows.
const someData = [
{ name: "Something", id: 1 },
{ name: "Anything", id: 2 }
];
//...
<FlatList
data={someData}
keyExtractor={item => item.id}
/>
This will render an unordered list, which contains the id of every element of someData. In this case it is just a projection of your data.
Here the executable example https://codesandbox.io/s/laughing-paper-lmi22.
Cheers
Under the hood, FlatList passes your data item to the keyExtractor.
Here your function myKeyExtractor accepts a parameter, which is basically the reference to your data.
function myKeyExtractor(item) {
return item.TitleID;
}
<Flatlist
data={someData}
keyExtractor={myKeyExtractor}
/>
Let's take a simple example here.
It is similar to the parameters of add and subtract functions here.
You could name the parameters anything you like. Parameters are just placeholders for your value.
function add(x, y) {
return x + y;
}
function subtract(thisIsAFirstParameter, thisIsASecondParamater) {
return thisIsAFirstParameter - thisIsASecondParamater;
}
add(10, 5);
subtract(10, 5);
I have a custom field that takes JSON and dynamically prints out TextField objects.
For each TextField I have an onChange and onBlur event. The onChange is for updating the state and the onBlur is for updating the final value to be past to the API and saved.
I'm using the useInput hook to save the updated value, however, when I use onBlur it doesn't save the value.
If I only use onChange it DOES save the value, but only the first key stroke, which is why I switched to onBlur. Any ideas? Here's the code:
const DefaultField = props => {
const {
input,
} = useInput(props.record);
let parsedObj = JSON.parse(props.record.values);
const [defaultState, setDefaultState] = React.useState({
websiteLink: parsedObj.websiteLink,
menuInstructionsLink: parsedObj.menuInstructionsLink,
surveyLink: parsedObj.surveyLink
});
const handleBlur = (event) => {
parsedObj[event.target.name] = event.target.value;
props.record.values= JSON.stringify(values);
//event.target.value is the expected value but it's not persisted when I save it.
};
const handleChange = (event) => {
setDefaultState({ ...defaultState, [event.target.name]: event.target.value });
};
return (
<FormControl component="fieldset">
<FormGroup {...input} id="defaultGroup" aria-label="position">
<React.Fragment>
{ Object.keys(parsedObj).map((key) => (
<TextField
id="standard-full-width"
name={key}
label={key}
onBlur={handleBlur}
onChange={handleChange}
style={{ margin: 8, width: '500px' }}
value={defaultState[key]}
fullWidth
margin="normal"
/>
))}
</React.Fragment>
</FormGroup>
</FormControl>
)
}
I never solved it properly, but I did discover that the dataProvider was being called twice. The first time it would send the expected values, but the second time the values were set back to the original, however I noticed that the field "previousData" had the values I needed. For now I'm just making sure to use the "previousData" field. This isn't the prettiest solution, but for now it's working. Maybe it's a bug or something sinister is going on.
I'm creating this component _Input.js
this is image for component
and i don't know how i can use TextInput Value in another class .
.
Here another class SignInScreen.js
this is image for another class
i want to set value <_Input/> in { username }
You can pass callback functions by props to you <_input> component, something like this:
<_input changeText={text => this.setState({user: text})}>
and into you customized component <_input> write something like this:
<TextInput onChangeText={text => this.props.changeText(text)}
Well, you could pass the values in the props of the element:
<_input user = {this.state.username} password = {this.state.password}>
And the only call them like this in your component:
this.props.username
this.props.props
I am trying to select item from picker item. problem is when i clicked on item then on function handler onValueChangeJob(value) perform some task
onValueChangeJob(value) {
this.setState({ jobValue: value.jobTitle})
USE value.number form another task
});
}
Below is my picker component
<Picker
style={commonStyle.pickerStyle}
textStyle={commonStyle.textStylePicker}
headerTitleStyle={commonStyle.headerTitleStyle}
headerBackButtonTextStyle={commonStyle.headerBackButtonTextStyle}
iosIcon={<Icon name="ios-arrow-down" />}
mode="dropdown"
placeholder="MAKE A SELECTION"
placeholderStyle={commonStyle.placeholderStyle}
note={false}
itemTextStyle={commonStyle.itemTextStyle}
selectedValue={this.state.jobValue}
onValueChange={this.onValueChangeJob.bind(this)}
>
{jobItems}
</Picker>
While The jobitems coming from map which created in render() function like
jobItems = this.state.jobTypesList.map((v,i) => {
return <Picker.Item key={i} value={v} label={v.jobTitle} />
});
So here if I used directly in picker.item props value-{v.jobTitle} then selected value change but i want to use whole object v in onValueChangeJob(value) function. One main thing state update but cant displaying on selected value of picker
tried lots of different things but not happening the thing what i want.
how should i handle this with proper example as i am new in react native.
Look at how my picker looks in this image
After lots of googling on one solution i find that solution that i have to filter this.state.jobTypesList this array on onValueChange handler and grab objects of particular job Title
return this.state.jobTypesList.map((v,i) => {
return <Picker.Item key={i} value={v.jobTitle} label={v.jobTitle}
});
let filterArray = this.state.jobTypesList.filter((v) => v.jobTitle === value)[0]
filterArray.jobTitle
filterArray.jobNumber
If you are using yup schema and validations, then you can use getValues() in selectedValue property.
I resolved it by
<Picker
selectedValue = {getValues('storeId')}
onValueChange={itemValue =>
setValue('storeId', itemValue, true)
}>
.../>
How to set hidden fields in redux form in react native ?
i jsut cannot find any way on how to do that . any help?
i ended using this :
this.props.dispatch(change("FORM_NAME","FIELD_NAME","VALUE"))
after this code runs, the form will create the field if it does not exists
I have faced the same issue.
What I do is to declare a Field like this and set the height to 0.
It is a little bit hacky but it works in my case.
<Field
component={TextInput}
name="departure_city_name"
type="hidden"
style={{ height: 0 }}
/>
And I change the value like this : this.props.change("departure_city_name", cityData.name);
Hope it helps.
you don't need to dispatch any action just perform this change whenever you need a hidden field in redux form.
this.props.change('Field_name', value)
Technically you don't need to create a type=hidden field because you can call the change function for the 'hidden' field you want to change if the field doesn't exist Redux-form will add it to your form state like an actual field
MyForm = reduxForm({
form: 'myForm'
})(MyForm)
MyForm = connect(
state => ({
initialValues: { areYouOk: 'no' }
})
)(MyForm)
export default MyForm
Whether you've set up initial values or not you'll always be able to call the change function with your new hidden value and it'll work anyway
let MyForm = ({ submitHandler, change }) => {
return (
<form onSubmit={submitHandler}>
<button
onClick={() => {
change('areYouOk', 'yes');
}}
label={'Yes'}
/>
</form>
);
}