I want to make checkbox mandatory field in react js.
I am new to reactjs but i have an idea that i should do it using length . Below is the code:
<CheckboxGroup name="zones" value={this.state.zones} onChange={this.handleCheckboxChange}>
{(Checkbox) => (
<>
{this.state.zones_to_render_to_render.map((zone, key) =>
<Col key={key} lg="10">
<label >
<Checkbox value={zone.zone_id} />{zone.zone_name}
</label>
</Col>
)}
</>
)}
</CheckboxGroup>
How to check using length?
The component <Checkbox /> has a prop required which is false by default you can make the checkbox mandatory by passing it true.
<Checkbox value={zone.zone_id} required={true} />
Related
Hello this is my code:
<Form
layout='horizontal'
size='small'
onFinish={this.handleSubmit.bind(this)}
>
<Form.Item
label={`Organization:`}
name={`Organization`}
>
<Input
onChange={
(e) => this.handleOrgInput(e)
}
/>
</Form.Item>
<Button
icon={
this.state.showMenu ?
<CaretDownOutlined />
:
<CaretRightFilled />
}
shape="circle"
onClick={() => {
{
this.handleFetchSystemData()
}
disabled={this.state.showMenu}
style={{marginLeft: 5}}
/>
{this.state.showMenu && this.state.myName!==undefined ?
<div>
{console.log('Name :', this.state.myName}
<Form.Item
name={"Name"}
label={`Name:`}
initialValue={this.state.myName}
>
<Input
// defaultValue={this.state.myName}
/>
</Form.Item>
<Form.Item
name={"lastName"}
label={`LastName:`}
initialValue={this.state.myLastName}
>
<Input
// defaultValue={this.state.myLastName}
/>
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
size="middle"
>
Submit
</Button>
</Form.Item>
</div>
:
undefined
</Form>
When i am pressing the button i call my server to fetch the data. But when i change the input and then clicking again the button the values on the Form.Item are remain the same, but my state has change. I can see that my state changes because i console.log it.
When i comment the initialValue attribute on Form.Item and using defaultValue attribute on Input component my values are changing smoothly, but when i press sumbit the values are not senting from the Form. This is a problem for me
I have seen a lot about this situation, but most of it regards functional components and not class components. Also i have seen that with class components some people using refs but Form component has not attribute ref. I have seen this regarding class components but did not help me. In the end the antd documentation regards i think functional components and not class, so i am a comfused.
I am trying to create multiple select input but had problem with the TextField because it is not accepting multiple props My TextField is shown in the code block.
<TextField
label={crmFieldTitleMap(value, t)}
size="small"
variant="outlined"
select
multiple
value={....}
onChange={....}
input={<OutlinedInput />}
renderValue={....}
MenuProps={MenuProps}
>
{value.options.length &&
value.options.map((item) => (
<MenuItem key={crmFieldTitleMap(item, t)} value={item.value}>
<Checkbox
checked={
crmPostData[value.value]
? crmPostData[value.value].includes(item.value)
: false
}
/>
<ListItemText primary={crmFieldTitleMap(item, t)} />
</MenuItem>
))}
</TextField>;
With TextField I can't select multiple items but label seems pretty nice
Then I found a solution to choose multiple select which I used and as shown in the code block.
<FormControl className="w-full ">
<InputLabel id="multiple_select_thingy">{titleMultiple(value, t)}</InputLabel>
<Select
labelId="multiple_select_thingy"
label={titleMultiple(value, t)}
size="small"
variant="outlined"
multiple
disabled={....}
value={....}
onChange={....}
input={<OutlinedInput />}
renderValue={....}
MenuProps={MenuProps}
>
{value.options.length &&
value.options.map((item) => (
<MenuItem key={crmFieldTitleMap(item, t)} value={item.value}>
<Checkbox
checked={
crmPostData[value.value]
? crmPostData[value.value].includes(item.value)
: false
}
/>
<ListItemText primary={crmFieldTitleMap(item, t)} />
</MenuItem>
))}
</Select>
</FormControl>;
With Select I can select multiple items perfectly but the label seems weird.
Also when there are no items selected input gets weird too
I'm having a hard time integrating material Ui Slider with React hook form. It's not registering the values. It's printing the value as undefined on console.log. Got an idea where I might be wrong?
<Controller
render={({ field: { value, onChange } }) => (
<CustomSlider
onChange={onChange}
value={value}
max={60}
marks={marks}
className={classes.slider}
defaultValue={10}
/>
)}
control={control}
name="slider"
/>
Here is codesandbox made by author of react-hook-form that contains many examples. Mui integration is also made.
According to example, you are supposted to do something like this:
<Controller
name="MUI_Slider"
control={control}
defaultValue={[0, 10]}
render={(props) => (
<Slider
{...props}
onChange={(_, value) => {
props.onChange(value);
}}
valueLabelDisplay="auto"
max={10}
step={1}
/>
)}
/>
Another question is in which part of your code are you trying to console.log() values.
You can use watch() method or
<button Click={() => console.log(getValues())}>get values</button>
I cant work out how to pass props to Box component override.
I need to pass position="end"" as required by InputAdornment but cant find how in the docs.
Full component is
<Select
value={value}
onChange={handleChange}
input={
<OutlinedInput
endAdornment={
photoRequired && (
<Box component={InputAdornment} position="end" pr={3}>
{required && <Gallery />}
<Gallery />
</Box>
)
}
/>
}
>
{choices.map((choice, i) => (
<MenuItem key={i} value={i + 1}>
{choice}
</MenuItem>
))}
</Select>
I am getting error trying to pass in the way above as its not expected on Box.
Warning: Failed prop type: The prop `position` is marked as required in `ForwardRef(InputAdornment)`, but its value is `undefined`.```
Try creating your own InputAdornment component that uses the position, such as:
const EndInputAdornment = () => {
return <InputAdornment position="end"/>
};
Then you can use that component to the Box:
<Box component={EndInputAdornment} pr={3}>
...
or if you don't want to create a separate component:
<Box component={<InputAdornment position="end"/>} pr={3}>
should work
I have recently started exploring Material UI and I have run into this strange behavior of a hintText in a TextField Component(the one from Material UI)
This is my code:
/* in my component ... */
/* ... */
render() {
const actions = [
<FlatButton
key="1"
label="Cancel"
primary
onTouchTap={this.handleClose}
/>,
<FlatButton
key="2"
label="Submit"
primary
type="submit"
onTouchTap={this.handleSubmit}
/>
];
return (
<div>
<IconButton
tooltip="Add Asset"
onTouchTap={this.handleOpen}>
<Add color={"#000"} />
</IconButton>
<Dialog
title="Add"
actions={actions}
modal
open={this.state.open}>
<form>
<TextField hintText="Type"
value={this.state.name}
onChange={this.handleName}/>
</form>
</Dialog>
</div>
);
}
So when I start typing in the textfield, the hinttext remains, resulting in unreadable text due to letters over another letters.
I would really appreciate it if someone could help me. :)
image
Try using placholder="Type" rather than hintText="Type".
The solution for this is that you will have to update the variable name in the function handleName everytime the user updates the field. So the complete code is:
<TextField
hintText="Type"
value={this.state.name}
onChange={this.handleName}
/>
and the function handleName:
handleName=(event)=>{
this.setState({name:event.target.value});
}
It should work. If not, let me know in the comments below!