I have a box which makes itself visible when a button is clicked. The box has a text field and a button. When that button is clicked, the box must hide again. But my problem is the box hides first and for a split second, i still can see the antd components.
box = () => {
<div style={{visibility: this.state.visibility}}>
<Input type= 'text' />
<Button onClick={() => {this.hideBox()}}>Send</Button>
</div>
}
showBox = () => {
this.setState({visibility: 'visible'});
}
hideBox = () => {
this.setState({visibility: 'hidden'});
}
render(){
return(
<div>
<Button onClick={() => {this.showBox()}}>Show</Button>
{this.box()}
</div>
)
}
I don't know how to make them hide at the same time.
Thank you for the help.
style={{display: `${this.state.visibility ? 'block' : 'none'}`}}
because antd components has it's default style: transition:"all 0.3s".
styles in devtool
if you hide it with style, I suggest using dispaly:block/none,instead of visibility.
Related
I have input form and input tag as a button.
Before I was able to make a button which changed styling according to clicking on it but now i try to make this input gray until user check the checkbox. I tried to use <Show> and when property but i cant use when on <Show> tag. Then I tried to use onChange property and it seem to not give me any errors. I just don't understand how can I change styling inside class=" and then connect it to checkbox function? My checkbox is made by using createSignal
Any ideas?
<input
onChange={functionForStyling}
name="submit"
type={"submit"}
value={"Sign up"}
class=""
/>
Assigning a class to a checkbox element is not different than assigning it to any html element.
Here is how you can assign a class to an html element conditionally.
import { createSignal, JSX } from 'solid-js';
import { render } from 'solid-js/web';
const App = () => {
const [isChecked, setIsChecked] = createSignal(true);
const toggle = () => setIsChecked(c => !c);
const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {
setIsChecked(event.currentTarget.checked);
};
return (
<div>
<style>{`
input.checked {
transform: rotate(45deg);
}
input.unchecked {
transform: rotate(45deg);
}
`}</style>
<input
type='checkbox'
class={isChecked() ? 'checked' : 'unchecked'}
checked={isChecked()}
onChange={handleChange}
/>
{` `}
<button onclick={toggle}>Toggle</button>
</div>
);
};
render(() => <App />, document.body);
https://playground.solidjs.com/anonymous/163ffec6-1293-4702-9ef6-0425461328c3
Please keep in mind that styling a checkbox is not that straightforward. You need to use pseudo selectors etc.
I have a rectangle div box on my page that contains various elements including a Font Awesome download icon. I want to display a specific text when the user hovers over the entire div, and then I want to change that text when the download button is hovered. I see the text change/show when the div is hovered, but don't see the text change when the download button is hovered. I added a console log in the download hover and that does show up. So I'm guessing the component is not re-rendering to display the updated text.
const [viewDownloadText, setViewDownloadText] = useState('');
...
return (
<div
className={'product d-flex'}
key={product.id}
onClick={() => openPDF(product.name)}
onMouseOver={() => setViewDownloadText('Click to view')}
onMouseOut={() => setViewDownloadText('')}
>
{viewDownloadText && (
<div className={'click-text'}>{viewDownloadText}</div>
)}
<FontAwesomeIcon
className={'SDS-download'}
icon={faFileDownload}
size={'2x'}
onMouseOver={() => {
console.log('download set!');
setViewDownloadText('Click to download');
}}
onMouseOut={() => {
setViewDownloadText('Click to view');
}}
/>
</div>
);
I would like to make an editor from scratch with a contenteditable div in react.js
The div is editable, but how can I add a button to make selected text bold?
I tried "document.execCommand('bold', false, null);", but cant make it work.
import React from 'react';
const Editor = () => {
return (
<div className="editor">
<div className="toolbar">
<button onclick={(e) => {
document.execCommand('bold', false, null);
e.preventDefault();
}}>b</button>
</div>
<div className="editor-content" contenteditable>
<h1>Test</h1>
<p>Test</p>
</div>
</div >
)
}
export default Editor;
Props are case-sensitive. Refactor onclick to onClick and contenteditable to contentEditable and this implementation should work
I am creating a todo app in React that is basically just a list of items, grouped by category. I want to add functionality such that when I click a single to do(which is a paragraph), it brings up an input with the current text that I can edit and save. How can I do that without manually editing the DOM?
Code:
A single todo item:
import React from 'react';
const Item = props => {
return (
<div
className={`item${props.item.purchased ? ' purchased' : ''}`}
onClick={() => props.toggleItem(props.item.id)}
>
<p>{props.item.name}</p>
</div>
);
};
export default Item;
I want to change the toggle to be a radio button and onClick to edit the todo.
sample image of todos
First of all, you will need a prop that updates item.name (this will be needed when you will edit the input)
You didn't explained well how you want it to work, so I made an example where you click on the text to edit it to a text input and also have a button to save the edit.
const Item = props => {
const [isEditing, setIsEditing] = useState(false);
return isEditing ? (
<div>
<input
value={props.item.name}
onChange={e => props.setItemName(e.target.value)}
/>
<button onClick={() => setIsEditing(false)}>Stop Editing</button>
</div>
) : (
<div
className={`item${props.item.purchased ? " purchased" : ""}`}
onClick={() => setIsEditing(true)}
>
<p>{props.item.name}</p>
</div>
);
};
I also created a working codesanbox with the behavior you want.
You will have to maintain a state to change between the TODO Item & TODO Input. Since you are using functional component, you can use useState hook from react to maintain the state as shown below
import React, { useState } from 'react';
const Item = props => {
const [isEditing, setIsEditing] = useState(false);
if (isEditing) {
return (
<div className={`item${props.item.purchased ? ' purchased' : ''}`}>
<input type="text/radio" value={props.item.name}>
</div>
);
} else {
return (
<div
className={`item${props.item.purchased ? ' purchased' : ''}`}
onClick={() => props.toggleItem(props.item.id)}
>
<p>{props.item.name}</p>
</div>
);
}
};
export default Item;
You might need to change the above a bit based on your application structure but this is what you need to follow.
I am building a small feature that has a checkbox styled as slider that, when turned on and off, should display another component - BatchWidget. The way I have it currently set up, it works on initial page load, and then hides as intended. However, when I go to "toggle" it back on to show the component again, it does not work. Is there an easy solution to this?
const Slider = (props) => {
return (
<div className="slider-container">
<label className="switch">
<input type="checkbox" checked={props.checked} onClick= {props.showWidget} />
<span className="slider round" />
</label>
<p className="batch-slider-title"> Batch Widget </p>
</div>
);
};
const Settings = ({showSlider}) => {
return (
<div className="settings">
<i className="icon-gear" onClick={() => showSlider()} />
</div>
);
}
class WidgetContainer extends Component {
constructor() {
super();
this.state = {
checked: true,
isSliderDisplayed: false,
};
this.showWidget = this.showWidget.bind(this);
this.showSlider = this.showSlider.bind(this);
}
showWidget() {
this.setState({
checked: !this.state.checked,
});
}
showSlider() {
this.setState({
isSliderDisplayed: !this.state.isSliderDisplayed,
});
}
render() {
const displayBatchWidget = this.state.checked ? <BatchWidget /> : null;
const displaySlider = this.state.isSliderDisplayed ? <Slider checked={this.state.checked} showWidget={this.showWidget} /> : null;
return (
<div>
<Settings showSlider={this.showSlider} />
{displaySlider}
{displayBatchWidget}
</div>
);
}
}
When I try to debug, it shows:
Warning: Failed form propType: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. Check the render method of `Slider`.
I think it is self-explanatory.
I've changed the line with checkbox to:
<input type="checkbox" checked={props.checked} onChange= {props.showWidget} />
Now, the batchWidget should hide and show on each click.
Reactjs matrial ui table check box hide
first do
<Table selectable={false}>
<TableHeader displaySelectAll={false} adjustForCheckbox={false}>
this method hide table header check box
then do <TableBody displayRowCheckbox={false}>
it hide table body checkbox
it work perfect.
reactjs