I can't figure out how to disable a button for a custom Button component in React. I want it to be conditional so it only disables when the word is written.
<Button disabled>Disabled</Button>
Here is a working example of the Button component : https://codesandbox.io/s/y08xk0vzxz
And here is the code :
function Button({ disabled, children }) {
return <button disabled={disabled}>{children}</button>;
}
You can check the log in codesanbox and see that by default if noting is specify for the value in your JSX, the value of the prop is set to true.
let isEmpty = true;
<Button disabled={isEmpty}>Disabled</Button>
here default value of disabled is true. We also can pass conditional value as needed
Related
So I'm trying to style an element when user focuses/hovers on an input/button. The way I'm doing it is by using a state and setting it to true or false if the user has hovered or focused but find it very repetitive and will take a lot of code, considering I would have to create a focused and hovered state for each button or input.
For example, I'm doing :
const [hoveredBtn, setHoveredBtn] = useState(false)
const [themecolor, setThemecolor]=useState('red') //this state is being from firebase, red would
//just be an example, it can be whatever the user sets it to.
return (
<button
onMouseOver={()=>setHoveredBtn(true)}
onMouseLeave={()=>setHoveredBtn(false)}
style={hoveredBtn?{backgroundColor: themecolor}:{backgroundColor:"white"}}
>
Button
</button>
)
Therefore, I would need to create a hovered variable for each button or input I have and im looking to know if there is a way to do it like this, but when I tried I get an error:
return (
<button onMouseOver={this.style.color=themecolor} onMouseLeave=
{this.style.color='white'}>Button</button>
)
You can’t specify pseudo-classes using inline styles. That means :hover, :focus, :active, or :visited go out the window rather than the component.
source: https://www.freecodecamp.org/news/react-styled-components-inline-styles-3-other-css-styling-approaches-with-examples/
style.css:
.myComponent:hover {
// define style
}
myReactComponent.jsx:
import './style.css';
This is a Framer/React question:
I have a bunch of text fields in a "page" component and I want the focus to shift on every "page" change.
There's a button controlling the pager but no trigger (onPageChange / onClick) is changing the attribute of "focus" on the relevant text input.
This is the code I tried using to change the value of foc2 (the focus attribute) to true
When I manually change it to true it works, but in this case it doesn't
export function Page(): Override {
return {
currentPage: state.page,
onChangePage: (index) => {
state.page = index
state.foc2 = true
},
}
}
Do you have more complete code you could share?
Make sure you set the state to the index of the current focused input, and use that to change the currentPage property.
Happy to help if you send more context, you can also find more help in Framer's community at https://framer.com/r/discord
I have this code:
<Dropdown
selectedKey={someKeyInState}
onChange={(e,option) => {
// check if the dropdown should be updated
if(someCondition){
// update selected key
}
else {
// don't update selected key
}
}}
options={someOptions}
/>
I want to block updating the selected key if a certain condition is met.
But, Dropdown visually shows the option that I clicked on as selected.
How do I prevent this behavior?
If you are using react, you should not do in this way. Use a global state optionState and try to use conditional checks which state should be shown to use onChange method is triggered. In order to do this. First extract your conditional check to separate function.
myFunction = () => {
// do conditional check and setState for optionState
}
--------------------------
onChange={myFunction}
Then when you select pop the key and value from the option state and update to the selectedState, now react automatically update the state and UI
The problem was my state for selectedKey was undefined it nothing is selected. When you pass in undefined you're basically saying to fabric to control the selectedKey state on it's own. I fixed by passing null instead of undefined. That made the Dropdown fully controlled.
Here's the code:
class MenuContainerComponent extends Component {
onInputWidgetMenuChange(event, data) {
console.log(data);
}
render() {
var inputWidgets = [];
for (var i = 0; i < this.props.cdata.widgets.inputWidgets.length; i++) {
var componentName = getComponentNameFromType(this.props.cdata.widgets.inputWidgets[i]);
var key = "inputWidget" + i;
inputWidgets.push(<Dropdown.Item key={key}>{componentName}</Dropdown.Item>);
}
return (
<Dropdown style={childStyle} text='Input widgets' icon='keyboard' floating labeled button className='icon' onChange={this.onInputWidgetMenuChange}>
<Dropdown.Menu>
<Dropdown.Header icon='tags' content='Select a widget to add to canvas' />
<Dropdown.Divider />
{inputWidgets}
</Dropdown.Menu>
</Dropdown>
)
}
I am trying to get an event on menu selection. 'onClick' is working in similar fashion but there is no event on menu selection.
AFAIK, since you're using Dropdown.Menu inside this Dropdown, the onChange won't work. It's for normal Drodowns (like selecting a value etc). Try creating a generic onClick and assign it to <Dropdown.Item />
Giri's answer is correct. Change this line
inputWidgets.push(<Dropdown.Item key={key}>{componentName}</Dropdown.Item>);
to
inputWidgets.push(<Dropdown.Item key={key} value={componentId} onClick={this.onInputWidgetMenuChange}>{componentName}</Dropdown.Item>);
Where componentId is the actual value of the Dropdown.Item, (as opposed to the text displayed). Given the right circumstances componentId can be the same as the componentName too.
Another thing is that since you're using Dropdown.Menu inside the Dropdown, clicking the items on the menu won't automatically change the value of the Dropdown. (which is why the onChange of event the Dropdown component isn't fired). You need to save the current value of the Dropdown in the react state and manually set the trigger prop of Dropdown to make it look like the selected item.
I can't seem to figure how to solve this problem that if you click a react-bootstrap button with a fontawesome icon as a child, the onclick target value will be undefined.
But if you click just outside the text with the icon and still inside the button, the onclick handler will still work.
https://jsfiddle.net/utmcykcg/5/
The issue seems to be that event.target can change depending on where in the button you click. Using event.currentTarget instead should give you the results you're looking for.
onClick(e) {
const btnValue = e.currentTarget.value
alert(btnValue);
}
See also: What is the exact difference between currentTarget property and target property in javascript