Как установить флажок по умолчанию в ReactJS?
У меня возникли проблемы с обновлением состояния флажка после того, как ему присвоено значение по умолчанию флажок ="флажок" в React.
var rCheck = React.createElement('input',
{type: 'checkbox', checked:'checked', value: true},
'Check here');
После назначения checked="checked"Я не могу взаимодействовать с состоянием флажка, нажимая, чтобы снять / проверить.
19 ответов
Если флажок создан только с React.createElement тогда собственность defaultChecked используется.
React.createElement('input',{type: 'checkbox', defaultChecked: false});
Кредит @nash_ag
Чтобы взаимодействовать с полем, вам необходимо обновить состояние флажка после его изменения. И для установки по умолчанию вы можете использовать defaultChecked,
Пример:
<input type="checkbox" defaultChecked={this.state.chkbox} onChange={this.handleChangeChk} />
Есть несколько способов сделать это, вот один:
Написано в ES6:
class Checkbox extends React.Component {
constructor(props) {
super(props);
this.state = {
isChecked: true,
};
}
toggleChange = () => {
this.setState({
isChecked: !this.state.isChecked,
});
}
render() {
return (
<label>
<input type="checkbox"
checked={this.state.isChecked}
onChange={this.toggleChange}
/>
Check Me!
</label>
);
}
}
ReactDOM.render(<Checkbox />, document.getElementById('checkbox'));
Вот живая демонстрация на JSBin.
Или с простым старым JavaScript:
var Checkbox = React.createClass({
getInitialState: function() {
return {
isChecked: true
};
},
toggleChange: function() {
this.setState({
isChecked: !this.state.isChecked // flip boolean value
}, function() {
console.log(this.state);
}.bind(this));
},
render: function() {
return (
<label>
<input
type="checkbox"
checked={this.state.isChecked}
onChange={this.toggleChange} />
Check Me!
</label>
);
}
});
React.render(<Checkbox />, document.getElementById('checkbox'));
Опять же, с живой демонстрацией на JSBin.
В жизненном цикле рендеринга React атрибут value в элементах формы переопределяет значение в DOM. В случае неконтролируемого компонента вы часто хотите, чтобы React указывал начальное значение, но оставлял последующие обновления неуправляемыми. Чтобы обработать этот случай, вы можете указать атрибут defaultValue или defaultChecked вместо значения.
<input
type="checkbox"
defaultChecked={true}
/>
Или же
React.createElement('input',{type: 'checkbox', defaultChecked: true});
Пожалуйста, проверьте более подробную информацию о defaultChecked для флажка ниже: https://reactjs.org/docs/uncontrolled-components.html
Кроме правильного ответа можно просто сделать:P
<input name="remember" type="checkbox" defaultChecked/>
Значение будет истинным или ложным
defaultChecked={true}
<input type="checkbox"
defaultChecked={true}
onChange={() => setChecked(!checked)}
/>
import React, { useState } from 'react'
const [rememberUser, setRememberUser] = useState(true) //use false for unchecked initially
<input
type="checkbox"
checked={rememberUser}
onChange={() => {
rememberUser == true ? setRememberUser(false) : setRememberUser(true)
}}
/>
Вы можете передать "true" или "" в свойство флажка ввода. Пустые кавычки ("") будут восприниматься как ложные, а пункт будет не отмечен.
let checked = variable === value ? "true" : "";
<input
className="form-check-input"
type="checkbox"
value={variable}
id={variable}
name={variable}
checked={checked}
/>
<label className="form-check-label">{variable}</label>
Это работает
<input type="checkbox" value={props.key} defaultChecked={props.checked} ref={props.key} onChange={this.checkboxHandler} />
И функция init это
{this.viewCheckbox({ key: 'yourKey', text: 'yourText', checked: this.state.yourKey })}
Я пытался сделать это с помощью компонента Class: вы можете просмотреть сообщение для того же
.....
class Checkbox extends React.Component{
constructor(props){
super(props)
this.state={
checked:true
}
this.handleCheck=this.handleCheck.bind(this)
}
handleCheck(){
this.setState({
checked:!this.state.checked
})
}
render(){
var msg=" "
if(this.state.checked){
msg="checked!"
}else{
msg="not checked!"
}
return(
<div>
<input type="checkbox"
onChange={this.handleCheck}
defaultChecked={this.state.checked}
/>
<p>this box is {msg}</p>
</div>
)
}
}
В моем случае я чувствовал, что defaultChecked некорректно работает с состояниями / условиями. Итак, я использовал "check" с "onChange" для переключения состояния.
Например.
checked={this.state.enabled} onChange={this.setState({enabled : !this.state.enabled})}
If someone wants to handle dynamic data with multiple rows, this is for
handing dynamic data.
You can check if the rowId is equal to 0.
If it is equal to 0, then you can set the state of the boolean value as true.
interface MyCellRendererState {
value: boolean;
}
constructor(props) {
super(props);
this.state = {
value: props.value ? props.value : false
};
this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
}
handleCheckboxChange() {
this.setState({ value: !this.state.value });
};
render() {
const { value } = this.state;
const rowId = this.props.rowIndex
if (rowId === 0) {
this.state = {
value : true }
}
return (
<div onChange={this.handleCheckboxChange}>
<input
type="radio"
checked={this.state.value}
name="print"
/>
</div>
)
}
Вот код, который я сделал некоторое время назад, он может быть полезен. вы должны поиграть с этой строкой => this.state = {проверено: ложь, проверено2: истина};
class Componente extends React.Component {
constructor(props) {
super(props);
this.state = { checked: false, checked2: true};
this.handleChange = this.handleChange.bind(this);
this.handleChange2 = this.handleChange2.bind(this);
}
handleChange() {
this.setState({
checked: !this.state.checked
})
}
handleChange2() {
this.setState({
checked2: !this.state.checked2
})
}
render() {
const togglecheck1 = this.state.checked ? 'hidden-check1' : '';
const togglecheck2 = this.state.checked2 ? 'hidden-check2' : '';
return <div>
<div>
<label>Check 1</label>
<input type="checkbox" id="chk1"className="chk11" checked={ this.state.checked } onChange={ this.handleChange } />
<label>Check 2</label>
<input type="checkbox" id="chk2" className="chk22" checked={ this.state.checked2 } onChange={ this.handleChange2 } />
</div>
<div className={ togglecheck1 }>show hide div with check 1</div>
<div className={ togglecheck2 }>show hide div with check 2</div>
</div>;
}
}
ReactDOM.render(
<Componente />,
document.getElementById('container')
);
CSS
.hidden-check1 {
display: none;
}
.hidden-check2 {
visibility: hidden;
}
HTML
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
вот кодекс => http://codepen.io/parlop/pen/EKmaWM
Вы можете использовать переменную состояния enableSwitch и функцию handleSwitch для обработки установленного по умолчанию Switch:
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="switchId" checked={this.state.enableSwitch} onClick={this.handleSwitch}/>
<label class="custom-control-label" for="switchId">switch text</label>
</div>
Вот функция, которая инвертирует переменную, если пользователь нажимает на переключатель:
handleSwitch = (e) => {
this.setState({ enableSwitch: !this.state.enableSwitch });
}
Я знаю, что это поздний ответ на старый вопрос, но это короткое решение может помочь другим пользователям.
<div className="display__lbl_input">
<input
type="checkbox"
onChange={this.handleChangeFilGasoil}
value="Filter Gasoil"
name="Filter Gasoil"
id=""
/>
<label htmlFor="">Filter Gasoil</label>
</div>
handleChangeFilGasoil = (e) => {
if(e.target.checked){
this.setState({
checkedBoxFG:e.target.value
})
console.log(this.state.checkedBoxFG)
}
else{
this.setState({
checkedBoxFG : ''
})
console.log(this.state.checkedBoxFG)
}
};
Не усложняй. Во-первых, разберитесь на простом примере, приведенном ниже. Вам будет ясно. В этом случае, сразу после нажатия флажка, мы берем значение из состояния (изначально оно ложно), меняем его на другое значение (изначально оно истинно) и соответственно устанавливаем состояние. Если флажок установлен во второй раз, он повторит тот же процесс снова. Получив значение (теперь оно истинно), измените его (на ложное), а затем установите состояние соответственно (теперь оно снова ложно. Код представлен ниже.
Часть 1
state = {
verified: false
} // The verified state is now false
Часть 2
verifiedChange = e => {
// e.preventDefault(); It's not needed
const { verified } = e.target;
this.setState({
verified: !this.state.verified // It will make the default state value(false) at Part 1 to true
});
};
Часть 3
<form>
<input
type="checkbox"
name="verified"
id="verified"
onChange={this.verifiedChange} // Triggers the function in the Part 2
value={this.state.verified}
/>
<label for="verified">
<small>Verified</small>
</label>
</form>
Это можно сделать с чистым js
<Form.Group controlId="categoryStatus">
<Form.Check
type="checkbox"
label="Category Status Active/In-active"
onChange={this.handleChecked}
/>
</Form.Group>
//Load category to form : to edit
GetCategoryById(id) {
this.UpdateId = id
axios.get('http://localhost:4000/Category/edit/' + id)
.then(response => {
this.setState({
category_name: response.data.category_name,
category_description: response.data.category_description,
is_active: response.data.is_active,
});
response.data.is_active == 1 ? document.getElementById("categoryStatus").checked = true : document.getElementById("categoryStatus").checked = false;
})
.catch(function (error) {
console.log(error);
})
}
Я устанавливаю состояние как любой тип []. и в конструкторе установите состояние на ноль.
onServiceChange = (e) => {
const {value} = e.target;
const index = this.state.services.indexOf(value);
const services = this.state.services.filter(item => item !== value);
this.setState(prevState => ({
services: index === -1 ? prevState.services.push(value) && prevState.services : this.state.services.filter(item => item !== value)
}))
}
В элементе ввода
this.onServiceChange (e)} /> this.onServiceChange (e)} /> this.onServiceChange (e)} /> this.onServiceChange (e)} />
Я понял это через некоторое время. Думаю, это может помочь вам:)
<div className="form-group">
<div className="checkbox">
<label><input type="checkbox" value="" onChange={this.handleInputChange.bind(this)} />Flagged</label>
<br />
<label><input type="checkbox" value="" />Un Flagged</label>
</div>
</div
handleInputChange(событие){
console.log("event",event.target.checked) }
описанный выше дескриптор дает вам значение true или false при включенном или отключенном