i have this code:
function MyControlledInput() {
const [altaData, setAltaData] = useState('');
const onChangeHandler = (e) => {
setAltaData(e.target.value);
return (
<>
<div>Input value: {value}</div>
<input
type='text'
name='name'
onChange={onChangeHandler}
value={altaData}
/>
<button onClick={ShowSentenceByWord}>Activate Lasers</button>
)}
can someone please explain what "e" does? i don't understand how the user data end up being in the "altaData" variable, thanks a lot
This "e" is the short term for event, which is related to the native html change event
In the link above you can check the details about its content, but most likely you'll be using e.target.value to get the newest value from the input.
And how you're using this value to call the setAltaData, the result of that will be the altData being changed.
That's the purpose of this react-hooks#useState
Related
I have a form that is passing a string to a search page that uses that string to query an API and display results. When I submit the form, the URL is x/search/string?slug=string. I am looking for a way to keep the URL cleaner and have it be x/search/string.
My form code:
<script lang="ts">
let slug = '';
</script>
<form action={`search/${slug}`}>
<input bind:value={slug} name="slug" type="text" />
<button type="submit" />
</form>
My +page.server.ts code:
export const load: PageServerLoad = async ({fetch, params}) =>{
const fetchSearchResults = async (slug:string) => {
const res = await fetch(`https://openlibrary.org/search.json?q=${slug}`)
const data = await res.json();
return {data};
}
return {
results: fetchSearchResults(params.slug)
}
}
The URL x/search/string?slug=string provides the same results as x/search/string but I am positive I am doing something wrong. Any help or links to some examples that would help would be greatly appreciated.
The input in the form is sent as part of the form request, for GET that results in query parameters.
There are multiple options, e.g. remove the name attribute.
You could also move the element out of the form, but I would not recommend that, as it breaks things like being able to press Enter to submit the form.
I am trying to use AsyncSelect from react-select library.
I have enabled cacheOptions option.
Using below mentioned steps I am seeing an issue with loadOptions
Search for a string test
List of options gets displayed
Clear the input field
Enter same string again test
Immediately displays same list of options
loadOptions fires an API with search input tes
Clear the input field
Enter same string again test
Immediately displays same list of options
loadOptions fires API with search input te.
I am not sure why loadOptions getting fired in this scenario if I am entering the same search string.
Here is the AsyncSelect
<AsyncSelect
classNamePrefix="select-item"
onChange={ onOptionSelect }
getOptionValue={ item => item.id }
placeholder="Search by Item"
formatOptionLabel={ company => <CompanyWithIcon Item={ Item } /> }
loadOptions={ loadOptions }
styles={ customStyles }
isSearchable
cacheOptions
isClearable
/>
Here is the loadOptions function
const loadOptions = inputValue => searchItem(inputValue);
Can anybody please help?
I think it is happening because you are not using a callback or a promise for loadOptions. The loadOptions should return a promise.
Reference doc -> https://react-select.com/props#async-props says:
loadOptions:
Function that returns a promise, which is the set of options to be used once the promise resolves.
It should be like below:
const loadOptions = (inputValue, callback) => {
setTimeout(() => {
callback(searchItem(inputValue));
}, 1000);
};
Is it possible to clear the input text (e.g. "qweqweqweqwe" in the example below) of the (Fluent/Fabric) NormalPeoplePicker programmatically?
I have tried accessing the input element (via the onBlur event) and attempted to change it's value and innerHtml but that doesn't work. Also, that doesn't seem to be a good way of doing it.
https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker
NormalPeoplePicker Component keep input value inside state and its not possible to change it directly:
const picker = React.useRef(null)
...
<NormalPeoplePicker
...
onBlur={() => {
if(picker.current) {
picker.current.input.current.value = ""; // Uncaught TypeError: Cannot set property value of #<Autofill> which has only a getter
}
}}
/>
From Official Documentation inside implementation section there is useful method updateValue which allows to change the input value.
const picker = React.useRef(null)
...
<NormalPeoplePicker
...
onBlur={() => {
if(picker.current) {
picker.current.input.current._updateValue("");
}
}}
/>
Codepen working example ln: 104.
Note:
This is a temporary solution, test every use case before production.
let orgSelected: ITag[] = [];
orgSelected.push({key:0 name:''});
const [selectedOrg,setselectedOrg] = useState(orgSelected);
On TagPicker Property just assign the statevalue like this.
selectedItems={selectedOrg}
This way the tagpicker property will always be selected with an empty item.
In a react app I am using ui-kitten components, specifically a Select component:
<Select
placeholder="Selecciona el departamento"
data={departmentOptions}
selectedOption={props.dept}
onSelect={(newDepartment) => {
props.setDepartment(newDepartment);
props.setDepartmentValidation(validationSuccess);
setDept(null);
// props.department = newDepartment;
}}
textStyle={textStyle.label}
controlStyle={styles.input}
style={{ marginBottom: 16 }}
labelStyle={textStyle.label}
icon={renderIcon}
/>
I would like to reset the Select component on the placeholder after every re-render, not the previous selected option.
I know that that method clear() is available as is described in the official documentation: ui-kitten docs but I don't know how to use those methods.
Any idea on how to use these methods (e.g clear(), blur(), show(), hide(), etc.).
I was wondering the exact same question too, and the docs weren't really clear about using methods. However, I found that the section on the Icons component has an example of how to use methods to animate the icons on the press of a button.
You need this at the start of your function body:
const select = React.useRef()
Then in your select component, have something like this:
<Select ref={select}>{...}</Select>
Finally, just do select.clear() when needed to clear the select component.
Let me know if this helps.
This one helped me const select = React.useRef(). I've shared a small snippet of code that you can refer to and the GitHub link that helped me.
const [clear, setClear] = useState(false);
// Create a ref
const select = React.useRef();
//useEffect to check when the clear value has changed
useEffect(() => {
//clear the ref when the clear value has changed
select.current.clear();
}, [clear]);
// Here is your select component
<Select
ref = {select} // ref we created before
selectedIndex = {selectedIndex}
onSelect = {(index) => setSelectedIndex(index)} >
<SelectItem title = "Option 1" / >
<SelectItem title = "Option 2" / >
<SelectItem title = "Option 3" / >
</Select>
Check out this issue on the UI-Kitten GitHub repo.
Here is the link to the comment that helped me. https://github.com/akveo/react-native-ui-kitten/issues/1001#issuecomment-612070876
My Code
<Creatable
name="productType"=
options = {this.state.productOptions}
value = {this.state.productType}
onNewOptionClick = {this.createProductType}
onChange = {this.handleProductChange}
/>
createProductType(option) {
var options = this.state.productOptions;
var label = option.label.charAt(0).toUpperCase() + option.label.slice(1);
options.push({
label: label,
value: option.value
})
this.setState({
productOptions: options,
productType: option.value
})
}
Before I click new option:
After I click new option:
Desired UI state after clicking new option:
Did not whether to post this as issues on Github as I am not sure of the exact way of using onNewOptionClick.
I was able to solve this by adding a ref
ref={input => this.productSelect = input }
and then calling it so
this.productSelect.select.closeMenu();
This (https://github.com/JedWatson/react-select/issues/1262) provided the final clue which helped me solve this. Thanks.
closeMenu() has been depreciated in v2 of React-Select. It has been replaced by blur() The following worked for me:
// Assign the ref in your Select object
<Select ref={input => this.selectRef = input } ... />
// Later in your code when you are trying to close the menu
this.selectRef.select.blur();
Not sure if there have been breaking changes in the library since the first answer, but I had to do this:
ref={input => {
if (input) this.productSelectMenu = input._selectRef.select
}}
Then:
this.productSelectMenu.closeMenu();