I'm using react-chartjs-2 to create a Line chart for my application.
For this app, I did a legend customisation and I could generate them using this:
// Chart component
<Line ref={ (chart) => chart ? this.insertLegends(chart) : null }
data={this.state.chart}
options={this.state.options}
/>
// Method which insert the html content
insertLegends(chart) {
this.refs.chartLegendContainerGlobal.innerHTML = chart.chart_instance.generateLegend();
}
First, is this a right approach?
I had to create an inline condition inside the component to prevent chart to be null.
Second, how and where can I put an onClick event for each legend?
I'm very lost on this, is there a better way to do this legend customisation??
If you give the ref a callback, then you won't get a value of null. Doing an inline ref like this causes the first render to be null and then the second render will have the element.
So you should change your refs to:
applyRef(ref) {
this.legend = ref;
}
render() {
return (
// Chart component
<Line ref={this.applyRef}
data={this.state.chart}
options={this.state.options}
/>
)
}
For adding a click event handler, if you can't add an onClick attrib for some reason, then you can set it in your insertLegends method:
handleClick(e) {
// Do something here...
}
insertLegends(chart) {
this.refs.chartLegendContainerGlobal.innerHTML = chart.chart_instance.generateLegend();
this.refs.chartLegendContainerGlobal.addEventListener('click', this.handleClick);
}
After some trouble and research, I figure out how to add the legend and control the click inside of it.
// Inside my render method I added a simple ref to my component
<Line ref='chart' data={this.convertData(this.props.data)} options={this.state.options} />
// Inside this method I'm able to get all the references that
// I need to inject the html inside a container for the legends and
// also to assign a click for each legend label
componentDidMount() {
let legends = this.refs.chart.chart_instance.generateLegend();
this.refs.chartLegendContainer.innerHTML = legends;
$(this.refs.chartLegendContainer).find('.legend-item').on('click', (e) => {
let index = $(e.currentTarget).index();
this.refs.chart.chart_instance.data.datasets[index].hidden = !this.refs.chart.chart_instance.data.datasets[index].hidden;
$(e.currentTarget).toggleClass('disable-legend');
this.refs.chart.chart_instance.update();
});
}
UPDATED
After the commect of #Chase DeAnda, I changed a little bit based on his considerations:
// Applying the callback function to the ref
<Line ref={this.applyRef} data={this.convertData(this.props.data)} options={this.state.options} />
// Inside the method I call the method to insert the legends
applyRef(ref) {
this.legend = ref;
this.insertLegends();
}
// Generates the legend and added them to my container element
// Also give them the onClick event
insertLegends() {
let legends = this.legend.chart_instance.generateLegend();
this.refs.chartLegendContainer.innerHTML = legends;
$(this.refs.chartLegendContainer).find('.legend-item').on('click', (e) => this.onClickLegend(e));
}
// During onClick I update the chart
onClickLegend(e) {
let index = $(e.currentTarget).index();
this.legend.chart_instance.data.datasets[index].hidden = !this.legend.chart_instance.data.datasets[index].hidden;
$(e.currentTarget).toggleClass('disable-legend');
this.legend.chart_instance.update();
}
Related
I am trying to show tooltip on mouse enter and hide on mouse leave.first i make a simple demo which is working fine.
https://codesandbox.io/s/exciting-shannon-4zuij?file=/src/list.js
above code working fine on hover it show's the tooltip and hide on leave.
see same concept i apply on a application.(this code is not working)
https://codesandbox.io/s/cool-liskov-8rvjw?file=/src/App.js
when I hover a item is show the tooltip.but it is not hiding the tooltip when you leaving the item.something went wrong.
const Student = ({students,clickHandler}) => {
console.log(students,"---ee")
const [selectedStudent,setSelectedStudent] = useState(null)
const onMouseHandler = (student,e)=>{
student.visibility = true
setSelectedStudent(student)
}
const onMouseLeaveHandler = (student)=>{
console.log('======',student)
student.visibility = false
setSelectedStudent(student)
}
return (
<ul className="student-container">
{
students && students.length > 0 ? students.map((student,index)=>{
return (
<li key={index} onClick={()=>{
clickHandler(student)
}}
onMouseLeave={()=>{
onMouseLeaveHandler(student)
}}
onMouseEnter={(e)=>{
onMouseHandler(student,e)
}} style={{position:'relative'}}>
<a><span>{student.name}</span></a>
{student.visibility? <ToolTip showToolTip={student.visibility} selectedStudent={selectedStudent}/>:null}
</li>
)
}):null
}
</ul>
);
};
export default Student;
Step too reproduce
Hover on first item Raj
and then try to hover sameer.both tooltip will display.I want only one tooltip will be display which is hovered.
I want my handlers should be in my functional component . I don't want to move these handler to parent component and pass handler as a props
In your demo it's also not work well, - one hide only when open another.
when you set student.visibility you not set state, so nothing has rerendered.
Then when you call setSelectedStudent you pass there just the same referance as was before, since it's the same object, so the state not changed, and again - nothing got rerendered.
What you have to do is pass the updated student in a new variable. like so:
setSelectedStudent({...student})
Then all should work
i got a component for a message. I got there a ContentEditable component https://www.npmjs.com/package/react-contenteditable i use there because i would need to add contacts in this "textarea" but i needed to implement html code inside for separate every tag, give them a color, etc.
The problem is that i want to prevent characters, user will not be able to add letters, just numbers, comma, and space. I created a function for this for use "onChange", it shows me the right data in the console. But in the frame it stills show the ilegal characters that the user has typed in. The correct data is in the state, but it does not update on the ContentEditable frame.
const contentEditable = React.createRef();
let state = { html: "0424" };
const handleChange = evt => {
let htmlf = evt.target.value.replace(/\D/g,''); ;
console.log(htmlf);
state = { html: htmlf };
console.log(state);
};
<ContentEditable
innerRef={contentEditable}
html={state.html} // innerHTML of the editable div
disabled={false} // use true to disable editing
onChange={handleChange} // handle innerHTML change
tagName="numero" // Use a custom HTML tag (uses a div by default)
id="contacts"
/>
SOLUTION
Just declare the component state in a different way.
constructor(props) {
super(props);
this.state = {
html: "0424"
};
}
contentEditable = React.createRef();
handleChange = evt => {
let htmlf = evt.target.value.replace(/\D/g, "");
console.log(htmlf);
this.setState({ html: htmlf })
console.log(this.state);
};
<ContentEditable
innerRef={this.contentEditable}
html={this.state.html} // innerHTML of the editable div
disabled={false} // use true to disable editing
onChange={this.handleChange} // handle innerHTML change
tagName="numero" // Use a custom HTML tag (uses a div by default)
id="contacts"
/>
I'm creating my own carousel and I want to add circles navigation on the bottom of slider. I am fetching data from mongoDb (3 pictures) and load them in App component and passing via props to Carousel component.
I want to map trough array and set index to data-slider property and later read this with e.target.dataset.slider and change in method changeSlider() to this value in data-slider property.
I have weird problem, when I click on this buttons circles sometimes I have value === 2, 0, 1 but sometimes I'm getting undefined and my slider don't know which slider make active.
<div className="circle-container">
{this.props.images.map((el, index) => {
return (
<button
key={index}
onClick={this.setActiveSlide}
className="circle-empty"
data-slider={index}
>
<i className="far fa-circle" />
</button>
);
})}
</div>
Method:
setActiveSlide = e => {
let slider = e.target.dataset.slider;
this.setState({
slider: slider
});
};
Call setActiveSlide method onClick gave me this result:
Your event is probably firing from the icon sometimes simply change the event target to currentTarget
setActiveSlide = e => {
// I've changed this variable to const because our data-slider is not
// going to change.
const slider = e.currentTarget.dataset.slider;
// Using es6 object property shorthand if we have both
// the same variable name and field we can simply pass in just the
// field name and it will auto convert it for us
this.setState({
slider
});
};
I'm having issues in updating the state values, I'm rendering a external component using Map, and hence not able to access this. So on click of the component I'm not able to call the handleClick function to update the state values..
Here is the state :
this.state = {
attributes : {
hours : {
},
cost : 0,
amenities : defaultAmenities
},
primary_category : "General"
}
Where defaultAmenities is a external file with large javascript object.
The render function :
render() {
let basicAmenities, extendedAmenities
let basicAmenitiesList = [], extendedAmenitiesList = []
//Wrong way of storing this
let _this = this;
}
... More Logics / Switch Cases ...
let amenitiesList = basicAmenitiesList.map(function(item, index){
return <Attribute key={index} name={item.amenity_id} type={item.title} icon={item.icon} selected={item.isSelected} value="" onClick={_this.handleClick.bind(_this)}/>
})
And the attribute component
<div className="attribute-grid" onClick={this.props.onClick}>
...
</div>
Handle click is a function to setState on click of Attribute.
handleClick(e) {
console.log(e.target);
}
On click of the attribute, I need to update the state. The result of console log is attached below. I need to target the input values, but since it return the entire div, how do i get the values of name/value/placeholder?
<div class="attribute-grid-block" data-reactid=".0.2.0.3.0.1.$0.0"><div class="attribute-grid-img" data-reactid=".0.2.0.3.0.1.$0.0.0"><img src="petsIcon" data-reactid=".0.2.0.3.0.1.$0.0.0.0"></div><div class="attribute-grid-info" data-reactid=".0.2.0.3.0.1.$0.0.1"><h6 data-reactid=".0.2.0.3.0.1.$0.0.1.0">Pets</h6><input type="text" name="pets" placeholder="NO INFO FOUND" value="" disabled="" data-reactid=".0.2.0.3.0.1.$0.0.1.1"></div></div>
you can get what you need from the target. but you need to set the onClick on the element that you want it to be the target and then you will have it:
handleClick(e) {
const name = e.target.name;
const value = e.target.value;
const placeholder = e.target.placeholder;
console.log(placeholder);
}
if you want to set the onClick elsewhere you will need to send the values you want, so inside Attribute component you will have a function that will be invoke on click and call the this.props.onClick({ name: '', value: ''});
if you need to use this inside this function, and you are using react with classes. you can write this:
handleClick = (e) => {
console.log(this);
}
I am using react-selectize component for customizable dropdown which allows users to add new options.
<Dropdown
options={myOptions}
value={selectedValue}
onValueChange={value => {
this.valueUpdated(emptyStringToNull(value));
}}
createFromSearch={this.createFromSearch}
/>
My createFromSearch and onValueChange functions are as below;
createFromSearch: function(options, search){
if (search.length === 0 || (options.map(function(option){
return option.label;
})).indexOf(search) > -1)
return null;
else {
return {'label': search, 'value': search};
}
},
onValueChange: function(text) {
// update the value in state
},
Everything works fine other than this small UI issue. It shows duplicate options soon after I click .
When I click anywhere in the screen it removes this duplicate layover and showing properly. Can anyone please suggest is it styling issue or any other thing I need to do?
I able to fix this issue by trying several things. I was overriding onValueChange method of the component and passed only the value to the actual onValueChange method as below;
const onValueChangeInDropdown = props => value => {
if (value) {
props.onValueChange(value.value);
} else {
props.onValueChange(null);
}
};
This cause the above styling issue since component couldn't find out item.newOption attribute. So solution is when adding newly created item for the option list add it as item.newOption = 'true' and pass the whole item object to onValueChange method.