Hi I am trying to change a state in my component when there is a click event on a particular chip rendered in the search bar. Is that possible to do?
I am aware of the multiValue multiValueLabel and I can for example change the background color of the chip with that, so I thought I could use those tags to change the state but I didn't have any luck.
I have attempted to find a solution with isSelected tag but I am always reading undefined in the states.isSelected when console.logged it.
I feel like I need a onClick() functionality somewhere but I can't figure it out. A bit of a guidance would be much appreciated!
I am sharing a live code here so maybe we can discuss over it.
if you want to validate if an option is selected you could use the prop: isOptionSelected
or
const onChange = selectedOptions => setSelected(selectedOptions);
with props
isMulti
value={selected}
onChange={onChange}
components={{
MultiValue: SortableMultiValue,
}}
You can attach onClick listener in MultiValueLabel component
<Select
isMulti={true}
components={{
MultiValueLabel: (props) => {
return (
<div onClick={() => console.log(props.data)}>
<components.MultiValueLabel {...props} />
</div>
);
}
}}
{...}
/>
Live Demo
EDIT
functionToRedirect(itemValue) is a function that gets called when an item in the picker is selected and it redirects to a new screen prepopulating some values in the screen based on 'itemValue'.
However, functionToRedirect(itemValue) is not being called when the same value is selected which I assume is because the value didn't change and thus onValueChange() will not be fired.
Is there a way for me to call the functionToRedirect(itemValue) even when the value didn't change(i.e when the initial value is selected) to try and redirect to the new screen?
<Picker
style={styles.picker}
itemStyle={styles.pickerItem}
mode={"dialog"}
selectedValue={this.props.value}
onValueChange={(itemValue) => {
functionToRedirect(itemValue);
}
}>
{this.state.pickerItems}
</Picker>
How about using a custom picker? Nativebase, a custom implementation of ReactNative UI components can give you a customised flavour of the components.
They have implemented Picker using RN Picker as a wrapper around flatlist of items opened in a modal window through which you can select items accordingly.
The solution I came to was to pass selectedValue null such that the first displayed option in the dropdown is the dropdown title.
The solution looks like below
<Picker
style={styles.picker}
itemStyle={styles.pickerItem}
mode={"dialog"}
selectedValue={null}
onValueChange={(itemValue) => {
this.props.onChange(itemValue)
}}
>
{this.state.pickerItems}
</Picker>
which shows the picker title as the initial value of the dropdown as shown below
Please take a look at my code for Dropdown,
I'm using the semantic ui react dropdown on an EditProfile component. I have pasted a sample code here, https://codesandbox.io/s/m4288nx4z8, but I could not get it to work because I'm not very familiar with functional components in React, I've always used Class component. But you can check the full code for the whole component below in the github gist.
https://gist.github.com/mayordwells/b0cbb7b63af85269091f1f98296fd9bb
Please, I need help on inserting values from multiple select options of a Dropdown into the Database and also a way to display that back upon viewing the profile edit page again.
I'm using semantic-ui-react in react + rails app.
Also when I insert a value using a normal drop down without multiple select, the value gets persisted into the database.
<Dropdown
placeholder='Select Country'
fluid
search
selection
options={countryOptions}
name='country'
defaultValue={this.state.extraInfo.country}
onChange={(e) => this.handleExtraInfoChange('country', e)}
/>
This code handles change for the dropdown elements.
handleExtraInfoChange = (name, event) => {
let value;
if (event.target.value !== undefined) {
value = event.target.value;
} else {
value = event.target.textContent;
}
let newExtraInfo = Object.assign(this.state.extraInfo, { [name]: value })
this.setState({ extraInfo: newExtraInfo});
}
But when I visit the page again, I get a white blank in the input box. Here's a screen pic for that. When I comment out the defaultValue or value property(i have tried with defaultValue and value), the white blank disappears, but the value picked by a user is also not seen.
Please advice what is a possible solution to this misbehavior? And what is the best way to insert multiple values into the Database?
Thanks in advance for your time.
A functional component does not have state, it's used for composition; you want to store state, so you either have to create a Component class or you need an external state container like redux.
I'm using react-date-picker, but on mobile the native keyboard shows up when clicked causing the date-picker to open on top, which doesn't look great. The online solution is to put the readonly attribute on the input field the date picker is bind with. But the read-date-picker component won't let me pass that prop...
Any nice solutions for this?
The readOnly is a good option to prevent the browser from showing the keyboard and typing on mobile. With the readonly set you will still be able to launch a click event on it.
When talking about the react-date-picker module the this will be also useful in non-mobile devices.
It is possible to add the option readOnly={true}, but it will disable completely the date picker inputs on all devices, as we can see on the following issues:
Datepicker does not open with readOnly=true #1443
make disable or readonly input field #961
Also, you will need to handle the onClick event and I don't think that this is a good idea.
Current workaround
At the moment, the solution to make the keyboard disabled on mobile and set the readOnly for all datePickers inputs will be edit the input properties on the component componentDidMount event:
componentDidMount() {
const datePickers = document.getElementsByClassName("react-datepicker__input-container");
Array.from(datePickers).forEach((el => el.childNodes[0].setAttribute("readOnly", true)))
};
A working solution using React hooks
const pickerRef = useRef(null)
useEffect(() => {
if (isMobile && pickerRef.current !== null) {
pickerRef.current.input.readOnly = true;
}
}, [isMobile, pickerRef]);
return (<DatePicker ref={pickerRef} ... />)
<DatePicker
. . . . .
onFocus={(e) => e.target.readOnly = true}
/>
This works for me.
So I ended up modifying the input-element in the componentDidMount lifecycle, like so;
document.getElementsByTagName("input")[0].setAttribute("readonly", "readonly");
This prevents the native visual keyboard on my phone to display. However it creates this "not allowed" red ugly cursor on desktop when hovering the input field, so I fixed that with by targeting my date-picker input.
.react-datepicker-wrapper input[readonly]{cursor: pointer;}
I welcome alternative solutions though.
A variation on Caroline Waddell's answer that got me unblocked on react-datepicker 2.8.0. The id of the date picker element is date-picker-input so modifying the the attribute after getting it by the id:
componentDidMount() {
document.getElementById('date-picker-input').setAttribute('readonly', 'readonly');
}
Did the trick for me if you have more than one input on the page.
Just hit this myself. Create a custom input with a button that opens the picker with the text of the selected value.
const ReadonlyInput = ({ value, onClick }: any) => (
<button onClick={onClick}>
{value}
</button>
);
return (
<ReactDatePicker
selected={fieldValue}
...
customInput = {<ReadonlyInput />}
/>
)
React datepicker has className react-datepicker__input-container.
So
const datePickers = document.getElementsByClassName(
"react-datepicker__input-container"
);
This returns an HTML collection which needs to be converted to an array. You can use Array.from but this is not supported in IE 11.
So, it is better to use native for loop.
So
for (let i = 0; i < datePickers.length; i++) {
datePickers[i].childNodes[0].setAttribute("readonly", true);
}
I used something like this onChangeRaw={(e)=>handleDateChangeRaw(e)} which allowed me to disable keyboard type option and i made the cursor pointer .
const handleDateChangeRaw = (e:React.FormEvent<HTMLInputElement>) => {
e.preventDefault();
}
<DatePicker
selected={(value && new Date(value)) || null}
onChange={val => { onChange(name, val); }}
dateFormat={ dateFormat }
minDate={new Date()}
timeIntervals={1}
onChangeRaw={(e)=>handleDateChangeRaw(e)}
/>
.react-datepicker__input-container input {
cursor: pointer;
}
JSX (React) Create a Custom Input with readOnly option
const DateCustomInput = ({ value, onClick }) => (
<input className="classes" readOnly onClick={onClick} placeholder='Date of
Birth' value={value}/>
);
Use this with datePicker
<DatePicker
id="preferred-date" name="EnquireNow[prefered_date]"
selected={date}
customInput={<DateCustomInput />}
/>
This will ensure calendar still pops up (which is not happening with readOnly props with DatePicker) but native keyboards do not pop up. This will not allow to edit the input even in desktop mode. To allow that use readOnly with mobile devices only
You can blur it onFocus to keep the keyboard closed but the datepicker options open, like:
<Datepicker onFocus={e => e.target.blur()} />
I made a socket connected app, when a value is changed, all the other clients receive the value modification. This is supposed to lead into an automatic UI change.
Here is my code :
<View style={{marginTop:20}}>
<Slider
ref="container"
minimumValue={0}
maximumValue={100}
value={this.state.briValue}
onValueChange={val => {
this.setState({ briValue: val })
socketEmit('hue-bri', val)
}
}
/>
<Text>Brightness : {this.state.briValue} %</Text>
</View>
The result :
Issue : the slider thumb does not move
I don't know why the Slider component does not re-render while the Text component does.
I tried to force the reload with this.refs.container.forceUpdate() but it does nothing.
I use the Slider from react-native-elements and the Text component is from the original react-native library.
Any help is greatly appreciated.
value prop is only used to initialize the slider.
Ref : https://facebook.github.io/react-native/docs/slider.html#value