So I'm trying to make the DataSearch component behave but the component calls the search/triggerquery for every key stroke and I don't understand why. Also javascript throws an exception because it want's the dataField attribute defined even though I'm making use of a customQuery. I only want the query to be called, when the user presses enter. Can anyone help?
class DocumentSearchComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
value: "",
corpus: "xxxx",
url: "http://localhost:7777",
};
this.handleKey = this.handleKey.bind(this);
this.onChange = this.onChange.bind(this);
}
handleKey(e, triggerQuery) {
if (e.key === "Enter") {
triggerQuery();
}
};
onChange(value) {
this.setState({
value,
});
};
customQuery(test) {
return {
query: {...}
},
_source: ["title", "publicationDate"],
size: 10,
highlight: {
pre_tags: ['<em>'],
post_tags: ['</em>'],
fields: {
fullText: {}
}
}
}
}
render() {
return (
<div className="App">
<ReactiveBase app={this.state.corpus} url={this.state.url}>
<DataSearch
componentId="documentSearch"
className="search-bar"
placeholder="Search for documents"
autosuggest={false}
customQuery={this.customQuery}
value={this.state.value}
onChange={this.onChange}
onKeyPress={this.handleKey}
/>
<ReactiveList
className="result-list"
componentId="SearchResult"
react={{
and: "documentSearch",
}}
dataField="label"
sortOptions={[
{ label: "Relevance", dataField: "_score", sortBy: "desc" },
]}
>
{({ data }) =>
data.map((item) => (
<div key={item.id} className="vertical-margin">
<DocumentResult
corpus={this.state.corpus}
document={item}
></DocumentResult>
</div>
))
}
</ReactiveList>
</ReactiveBase>
</div>
);
}
Related
I want to change the text of a specific button when I click on that button in React. But the issue is when I click the button the title will change for all buttons!
class Results extends Component {
constructor() {
super();
this.state = {
title: "Add to watchlist"
}
}
changeTitle = () => {
this.setState({ title: "Added" });
};
render() {
return (
<div className='results'>
{
this.props.movies.map((movie, index) => {
return (
<div className='card wrapper' key={index}>
<button className='watchListButton' onClick={this.changeTitle}>{this.state.title}</button>
</div>
)
})
}
</div>
)
}
}
You would need to come up with a mechanism to track added/removed titles per movie. For that, you would have to set your state properly. Example:
this.state = {
movies: [
{id: 1, title: 'Casino', added: false},
{id: 2, title: 'Goodfellas', added: false}
]
This way you can track what's added and what's not by passing the movie id to the function that marks movies as Added/Removed. I have put together this basic Sandbox for you to get you going in the right direction:
https://codesandbox.io/s/keen-moon-9dct9?file=/src/App.js
And here is the code for future reference:
import React, { Component } from "react";
import "./styles.css";
class App extends Component {
constructor() {
super();
this.state = {
movies: [
{ id: 1, title: "Casino", added: false },
{ id: 2, title: "Goodfellas", added: false }
]
};
}
changeTitle = (id) => {
this.setState(
this.state.movies.map((item) => {
if (item.id === id) item.added = !item.added;
return item;
})
);
};
render() {
const { movies } = this.state;
return (
<div className="results">
{movies.map((movie, index) => {
return (
<div className="card wrapper" key={index}>
{movie.title}
<button
className="watchListButton"
onClick={() => this.changeTitle(movie.id)}
>
{movie.added ? "Remove" : "Add"}
</button>
</div>
);
})}
</div>
);
}
}
export default App;
https://primefaces.org/primereact/showcase/#/autocomplete
I am trying to load suggestions dropdown as soon as component loads with some data in componentDidMount. The suggestionsList is updating with the obj data in componentDidMount, however suggestion dropdown is not showing.
Simply, whenever input is get focussed and no input text is there, a suggestion dropdown should show.
abcCmp.jsx
class abcCmp extends React.Component {
state;
constructor() {
super();
this.state = {
suggestionsList: []
};
}
componentDidMount() {
let obj = [{'color':'red',name: 'Danny', id: '1'}];
this.setState({suggestionsList: [...obj]})
}
render(){
return (
<div className="containerBox">
<AutoComplete suggestions={this.state.suggestionsList}
minLength={1} placeholder="Add People" field="name" multiple={true}
autoFocus={true} />
</div>
)
}
If you gone through documentation there are other parameters also required.
Those are: completeMethod,value,onChange out of these completeMethod is required to show filtered list as you type. Inside completeMethod you need to filter your data that's how your dropdown list reduces as you type more.
You need ref for toggling dropdown functionality and also you need to check on focus if input value is empty and no value is selected so toggle dropdown.
Here is simple POC I create for reference. Try typing D
Code:
import React from "react";
import { AutoComplete } from "primereact/autocomplete";
import "./styles.css";
let obj = [
{ color: "red", name: "Dagny", id: "1" },
{ color: "red", name: "kanny", id: "2" },
{ color: "red", name: "Dgnny", id: "3" },
{ color: "red", name: "Danny", id: "4" },
{ color: "red", name: "Dmnny", id: "5" },
{ color: "red", name: "Donny", id: "" }
];
class MyComponent extends React.Component {
myRef = React.createRef();
constructor() {
super();
this.state = {
suggestionsList: [],
selected: null,
inputValue: null
};
}
componentDidMount() {
this.setState({ suggestionsList: [...obj] });
}
searchList = (event) => {
let suggestionsList;
if (!event.query.trim().length) {
suggestionsList = [...obj];
} else {
suggestionsList = [...obj].filter((list) => {
return list.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
this.setState({ suggestionsList });
};
render() {
return (
<div className="containerBox">
<AutoComplete
suggestions={this.state.suggestionsList}
completeMethod={this.searchList}
minLength={1}
ref={this.myRef}
dropdown
inputId="my"
placeholder="Add People"
field="name"
onFocus={(e) => {
if (!this.state.inputValue && !this.state.selected) {
this.myRef.current.onDropdownClick(e, "");
}
}}
onKeyUp={(e) => this.setState({ inputValue: e.target.value })}
// completeOnFocus={true}
multiple={true}
autoFocus={true}
value={this.state.selected}
onChange={(e) => this.setState({ selected: e.value })}
/>
</div>
);
}
}
export default function App() {
return (
<div className="App">
<MyComponent />
</div>
);
}
Demo: https://codesandbox.io/s/prime-react-autocomplete-forked-n3x2x?file=/src/App.js
Add dropdown inside autocomplete tags and also add completeMethod and bind it to a search/filter function, add a value to bind the selected value, add a onChange function to it
You can find full documantation and working example here :PrimeFaces React Autocomplete
I am doing a React search where user can add multiple filters. The idea is that at first there is only one filter (select and input field) and if user wishes to add more, he can add one more row of (select and input) and it will also take that into account.
I cannot figure out the part on how to add more rows of (select, input) and furthermore, how to read their data as the list size and everything can change.
So I have multiple options in the select array:
const options = [
{ label: "foo", value: 1 },
{ label: "bar", value: 2 },
{ label: "bin", value: 3 }
];
Now if user selects the first value from the Select box and then types a text in the input box I will get their values and I could do a search based on that.
const options = [
{ label: "foo", value: 1 },
{ label: "bar", value: 2 },
{ label: "bin", value: 3 }
];
class App extends React.Component {
state = {
selectedOption: null,
textValue: null
};
handleOptionChange = selectedOption => {
this.setState({ selectedOption: selectedOption.value });
};
handleTextChange = event => {
this.setState({ textValue: event.target.value });
};
handleSubmit = () => {
console.log(
"SelectedOption: " +
this.state.selectedOption +
", textValue: " +
this.state.textValue
);
};
addNewRow = () => {
console.log("adding new row of filters");
};
render() {
const { selectedOption } = this.state;
return (
<div>
<div style={{ display: "flex" }}>
<Select
value={selectedOption}
onChange={this.handleOptionChange}
options={options}
/>
<input
type="text"
value={this.state.textValue}
onChange={this.handleTextChange}
/>
</div>
<button onClick={this.addNewRow}>AddNewRow</button>
<button onClick={this.handleSubmit}>Submit</button>
</div>
);
}
}
export default App;
I have also created a CodeSandBox for this.
If user clicks on the addNewRow a new row should appear and the previous (search, input) should be selectable without the row that was previously selected.
I don't even really know how I should approach this.
To add new row of inputs on click of button you need to add new input item into the list of inputs, like I have mention below::
import React, { Component } from 'react'
import Select from "react-select";
const options = [
{ label: "foo", value: 1 },
{ label: "bar", value: 2 },
{ label: "bin", value: 3 }
];
class App extends Component {
constructor(props) {
super(props);
this.state = { inputGroups: ['input-0'] };
}
handleSubmit = () => {
console.log("form submitted");
};
AddNewRow() {
var newInput = `input-${this.state.inputGroups.length}`;
this.setState(prevState => ({ inputGroups: prevState.inputGroups.concat([newInput]) }));
}
render() {
return (
<div>
<div>
<div>
{this.state.inputGroups.map(input =>
<div key={input} style={{ display: "flex" }}>
<Select
options={options}
/>
<input
type="text"
// value={this.state.textValue}
// onChange={this.handleTextChange}
/>
</div>
)}
</div>
</div>
<button onClick={() => this.AddNewRow()}>AddNewRow</button>
<button onClick={this.handleSubmit()}>Submit</button>
</div>
);
}
}
export default App;
After click on "AddNewRow" button it will add new input group for you. Now you need to wrap this inputGroup inside "Form" to get data of each inputGroup on click of submit.
I hope it will resolve your issue.
I am having 4 buttons each button have name id and selected boolean flag.
What I am trying to achieve is, on click of button, boolean button flag should be changed of that particular button. For this, I need to setState in map function for that particular button Id.
My issue is I am unable to setState in map function for that particular clicked button, its btnSelected should be changed
My aim is to create a multi-select deselect button.Its kind of interest selection for the user and based on that reflect the UI as well my array. Here is my code.
Thanks in anticipation.
import React, { Component } from "react";
import { Redirect } from "react-router-dom";
export default class Test extends Component {
constructor(props, context) {
super(props, context);
this.handleChange = this.handleChange.bind(this);
this.state = {
value: "",
numbers: [1, 2, 3, 4, 5],
posts: [
{
id: 1,
topic: "Animal",
btnSelected: false
},
{
id: 2,
topic: "Food",
btnSelected: false
},
{
id: 3,
topic: "Planet",
btnSelected: false
},
{ id: 4, topic: "Nature", btnSelected: false }
],
allInterest: []
};
}
handleChange(e) {
//console.log(e.target.value);
const name = e.target.name;
const value = e.target.value;
this.setState({ [name]: value });
}
getInterest(id) {
this.state.posts.map(post => {
if (id === post.id) {
//How to setState of post only btnSelected should change
}
});
console.log(this.state.allInterest);
if (this.state.allInterest.length > 0) {
console.log("Yes we exits");
} else {
console.log(id);
this.setState(
{
allInterest: this.state.allInterest.concat(id)
},
function() {
console.log(this.state);
}
);
}
}
render() {
return (
<div>
{this.state.posts.map((posts, index) => (
<li
key={"tab" + index}
class="btn btn-default"
onClick={() => this.getInterest(posts.id)}
>
{posts.topic}
<Glyphicon
glyph={posts.btnSelected === true ? "ok-sign" : "remove-circle"}
/>
</li>
))}
</div>
);
}
}
Here's how you do something like this:
class App extends Component {
state = {
posts: [{
name: 'cat',
selected: false,
}, {
name: 'dog',
selected: false
}]
}
handleClick = (e) => {
const { posts } = this.state;
const { id } = e.target;
posts[id].selected = !this.state.posts[id].selected
this.setState({ posts })
}
render() {
return (
<div>
<form>
{this.state.posts.map((p, i) => {
return (
<div>
<label>{p.name}</label>
<input type="radio" id={i} key={i} checked={p.selected} onClick={this.handleClick} />
</div>
)
})}
</form>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Working example here.
You can do this by passing the index from the map into each button's handleClick function, which would then return another function that can be triggered by an onClick event.
In contrast to Colin Ricardo's answer, this approach avoids adding an id prop onto each child of the map function that is only used for determining the index in the handleClick. I've modified Colin's example here to show the comparison. Notice the event parameter is no longer necessary.
class App extends Component {
state = {
posts: [{
name: 'cat',
selected: false,
}, {
name: 'dog',
selected: false
}]
}
handleClick = (index) => () => {
const { posts } = this.state;
posts[index].selected = !this.state.posts[index].selected
this.setState({ posts })
}
render() {
return (
<div>
<form>
{this.state.posts.map((p, i) => {
return (
<div>
<label>{p.name}</label>
<input type="checkbox" key={i} checked={p.selected} onClick={this.handleClick(i)} />
</div>
)
})}
</form>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Working example here
I have build a form, where there is dropdown on which selection below fields will be displayed. So say, first optionSet1 was selected for which there was 3 field to be shown. If user changes dropdown to select optionSet2, different set of options will be shown.
But when optionSet2 is being rendered and optionSet1 is removed it should have called componentWillUnmount for the each InputFields rendered previously, which is not the case. This function is never called.
class LeadUpdate extends React.Component {
constructor(props, context) {
super(props, context);
}
_getUpdateFields() {
let fields = this.props.inputFields[this.state.updateType];
return _.map(fields, f => {
_.assignIn(f, {
fieldParentClass: 'form-group col-lg-6',
eventName: this.state.eventName
});
return <InputField config={f} />
});
}
_onChange(id, value) {
this.setState({
optionSet: value
});
}
render() {
return (<div>
<div className="col-lg-5">
<form role="form" className="vymo-form">
<InputField values={this.props.values} onChange={this._onChange.bind(this)} />
</form>
</div>
<div className="row">
<form role="form" className="vymo-form">
{this._getUpdateFields()}
</form>
</div>
</div>)
}
}
Update: I have just realised that componentWillUnmount is being called but the actual problem is with eventListner. I am pasting codes here.
Problem -- I am using nodejs events for getting values from different input fields populated. But when optionSet changes all previous unmounted options are also listening to event.
InputField --
import eventsService from '../../../services/events-service';
class InputField extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
id: this.props.id,
value: this._getInputFieldValue() || '',
valid: true,
errorVisible: false,
errorMessage: ''
};
}
componentWillMount() {
if(this.props.eventName) {
this._subscription = eventsService.emitter.addListener(this.props.eventName, this._validate.bind(this));
}
}
componentWillUnmount() {
if(this.props.eventName) {
eventsService.emitter.removeListener(this.props.eventName, this._validate.bind(this));
}
}
_handleChange(event) {
if(this.props.onChange) {
this.props.onChange.call(null, this.state.id, event.target.value);
}
this.setState({
value: event.target.value
});
}
_getClasses(classes) {
if (classes) {
return classes.join(' ');
}
}
_getInputFieldProps() {
let inputProps = {
value: this.state.value,
type: this.props.type,
placeholder: this.props.placeholder || '',
id: this.props.id,
onChange: this._handleChange.bind(this),
className: this._getClasses(this.props.classes) ? this._getClasses(this.props.classes) + 'form-control' : 'form-control',
maxlength: this.props.maxLength,
disabled: this.props.disabled ? "true" : null,
min: this.props.min,
max: this.props.max,
readOnly: this.props.readonly ? "true" : null,
required: this.props.required
};
return inputProps;
}
_validate(result) {
if (this.props.required && !this.state.value) {
valid = false;
this.setState({
errorVisible: true,
errorMessage: 'this is required field',
valid: false
});
}
if(valid) {
this.setState({
errorVisible: false,
errorMessage: 'this is not a valid phone number',
valid: true
});
}
result.valid &= valid;
result.values.push({
type: this.props.type,
code: this.state.id,
value: this.state.value,
name: this.props.label
});
}
_getInputFieldValue() {
switch (this.props.type) {
case Types.NUMBER:
case Types.EMAIL:
case Types.DECIMAL:
case Types.PHONE:
case Types.TEXT:
return this.props.value;
}
}
render() {
let props = this._getInputFieldProps();
return (<div className={this.props.fieldParentClass}>
<label for={this.props.id}><span>{this.props.label}</span><span>{props.required ? '*' : ''}</span></label>
<input {...props}/>
<span className={this.state.errorVisible ? 'show' : 'hide'}>{this.state.errorMessage}</span>
</div>)
}
}
event service:--
import {EventEmitter} from 'events';
//TODO make this as constant
var emmiter = new EventEmitter();
export default {
emitter: emmiter,
}
I understand this event service is bad, its just was for quickly test this functionality.
The Field component remains mounted, in this case you need to use keys to identify which component has changed, added, or removed:
{this.state.mode === 'custom' ?
<Field
label="A"
name="requested_completes"
type="number"
key="a"
/>
:
<Field
label="B"
name="requested_completes"
type="dropdown"
key="b"
/>
}