#javascript #reactjs #html #redux
#javascript #reactjs #HTML #redux
Вопрос:
У меня есть флажки для каждого td в таблице. Теперь у меня есть другая таблица, в которой установлен один флажок. Установив это, я хочу установить все остальные флажки первой таблицы.
Вот код,
<tr key={key}>
<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" /></td>
<td>{item.technology}</td>
</tr>
для второй таблицы я сделал,
handleCheckBox = () => {
console.log("callling the handle change");
this.setState({
isCheckd: !this.state.isCheckd
})
}
constructure(props) {
this.state = { isCheckd: false }
<td className="text-right mr-1"><input type="checkbox" checked={this.state.isCheckd} onChange={this.handleCheckBox} /></td>
}
Теперь в этом работает обработчик щелчков. Но, теперь, как мне установить все остальные флажки другой таблицы, без использования jquery.
Может ли кто-нибудь помочь мне с этим?
Пробованное решение —
state = { dynamicProp: {}, isCheckd: false,}
handleCheckBox = () => {
this.setState({
isCheckd: !this.state.isCheckd
}, () => {
this.props.jobs.forEach((item) =>
this.setState(prevState => ({
dynamicProp: {
...prevState.dynamicProp,
[item.jdName]: prevState.isCheckd
}
})
))
});
}
handleTableCheckboxChange = (e) => {
const target = e.target.name;
const checked = e.target.checked;
this.setState(prevState => ({
dynamicProp: {
...prevState.dynamicProp,
[target]: checked
}
}), () => {
const result = this.allTrue(this.state.dynamicProp);
this.setState({
isCheckd: result ? false : true
})
})
}
allTrue(obj) {
for (var o in obj)
if (!obj[o]) return true;
return false;
}
а затем передайте все реквизиты дочернему элементу. Итак, проблема, с которой я сталкиваюсь сейчас, заключается в методе handleTableCheckboxChange, где я не получаю способ, которым вы использовали filter для получения непроверенного элемента. и тогда флажок «выбрать все» будет изменен.
Ответ №1:
Я не очень хорошо понял ваш код, поэтому я понимаю это из того, что вы написали. И затем я создал для вас рабочий пример. Надеюсь, это может вам помочь!
ОБНОВЛЕННЫЙ КОД
const Table=(props)=>(
<table>
{
props.items.map((item, i) => (
<tr key={i}>
<td>
<input type="checkbox" checked={props.parentState[item.name]} name={item.name} onChange={props.handleChange} />
</td>
<td>{item.value}</td>
</tr>
))
}
</table>
);
class App extends React.Component {
items = [
{
value: 'EN',
name: 'field1'
},
{
value: 'IT',
name: 'field2',
}
];
state = {
checkAll: false,
};
render() {
return (
<div>
Check All
<input type="checkbox" onChange={this.handleCheckAll} checked={this.state.checkAll}/>
<Table
handleChange={this.handleChange}
items={this.items}
parentState={this.state}
/>
</div>
);
}
handleCheckAll = () => {
this.setState({
checkAll: !this.state.checkAll
}, () => {
this.items.forEach((item) => this.setState({ [item.name]: this.state.checkAll}))
});
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.checked
}, () => {
const uncheckedItems = this.items.filter((item) => !this.state[item.name])
this.setState({
checkAll: uncheckedItems.length === 0?true:false
});
});
}
}
ReactDOM.render(<App />, document.getElementById("root")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div> Комментарии:
1. Да, я тоже могу сделать так, я могу выбрать все только на основе этого реквизита. Но тогда этот td также может быть выбран индивидуально, в вашем решении мы не можем выбрать его индивидуально
2. вы можете выполнить onChange для этих td и управлять этим состоянием на основе свойства checkbox name. в onChangeHandler вы можете динамически обновлять состояние для каждого флажка. this.setState({[e.target.name ]:CheckedValue}); и затем вы можете проверить, установлено ли значение всех полей, проверьте, все ли флажки также должны быть установлены
3. Итак, здесь мы уже используем checked ={this.state.checkAll} этот параметр состояния, тогда как мы можем использовать другой параметр состояния только с checked
4. присвойте каждому флажку уникальное свойство name, а затем this.setState({[e.target.name ]:e.target.checked});
5. позвольте мне сделать это за вас.
Ответ №2:
Вот пример кода. Очевидно, что я не рассмотрел все случаи сбоя. Тем не менее, вы получите представление о том, как это можно сделать.
import React from 'react';
export default class CheckboxIndex extends React.Component{
constructor(props){
super(props);
this.state = {
isChecked : false,
allTDS : [
{name:"name 1",value:false},
{name:"name 2",value:false},
{name:"name 3",value:false},
{name:"name 4",value:false},
{name:"name 5",value:false},
{name:"name 6",value:false},
{name:"name 7",value:false}
]
}
}
handleCheckBox = () => {
this.setState({isChecked: !this.state.isChecked});
let tempTDS = this.state.allTDS;
for (let i =0; i < tempTDS.length; i ){
tempTDS[i].value = !this.state.isChecked;
}
this.setState({allTDS : tempTDS});
};
render(){
let listOfTR;
if(this.state.allTDS.length){
listOfTR = this.state.allTDS.map((item,index)=>{
return(
<tr key={item.name}>
<td>
<label htmlFor={item.name}>
<input id={item.name} checked={item.value} type="checkbox"
onChange={()=>{
let tempObj = this.state.allTDS;
tempObj[index].value = !tempObj[index].value;
this.setState({allTDS:tempObj});
}}/>{item.name}
</label>
</td>
</tr>
)
})
}
return(
<div>
<label htmlFor="allTDS">
<input type="checkbox" id="allTDS" name="all" checked={this.state.isChecked}
onChange={this.handleCheckBox}/> All
</label>
<table>
<tbody>
{listOfTR}
</tbody>
</table>
</div>
)
}
}
Ответ №3:
class CheckboxTest extends React.Component {
constructor() {
super();
this.state = {
selectAll: false,
data1: false,
data2: false
};
this.selectAll = this.selectAll.bind(this);
this.selectField = this.selectField.bind(this);
}
selectAll() {
this.setState({
data1: !this.state.selectAll,
data2: !this.state.selectAll,
selectAll: !this.state.selectAll
});
}
selectField(event) {
if (event.target.value === "data1")
this.setState({ data1: !this.state.data1 });
else this.setState({ data2: !this.state.data2 });
}
render() {
return (
<div className="App">
<table>
<tbody>
<tr>
<td align="center">
<input
checked={this.state.data1}
onChange={this.selectField}
type="checkbox"
name="myTextEditBox1"
value="data1"
/>
</td>
<td>data 1</td>
</tr>
<tr>
<td align="center">
<input
checked={this.state.data2}
onChange={this.selectField}
type="checkbox"
name="myTextEditBox2"
value="data2"
/>
</td>
<td>data 2</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td align="center">
<input
onChange={this.selectAll}
type="checkbox"
name="myTextEditBox1"
value="all"
/>
</td>
<td>Click all</td>
</tr>
</tbody>
</table>
</div>
);
}
}
Вы можете использовать состояние для реализации этого. Поддерживайте состояние для каждого поля флажка и при изменении флажка запускайте метод для установки состояния в соответствии с вашими условиями
Ответ №4:
this.setState({
isCheckd: !this.state.isCheckd
})
В этом случае isCheckd значение в состоянии соответствует одному флажку. Чтобы установить все другие флажки другой таблицы, вы должны обновить значения, установленные в setState, до всех значений, которые соответствуют всем флажкам, которые вы хотите установить.
Итак, если у вас есть еще 3 флажка, значения которых соответствуют isCheckd1, isCheckd2, and isCheckd3 состоянию, тогда ваш обработчик будет:
this.setState({
isCheckd1: true,
isCheckd2: true,
isCheckd3: true
})
Комментарии:
1. На самом деле, другая таблица визуализируется с использованием карты
2. это похоже на то, что пользователь может установить эти флажки по отдельности или пользователь может выбрать все, используя выбрать все
3. Конечно, для выбора всего потребуется своя собственная функция-обработчик, и этой функции потребуется обновить состояние всех значений, соответствующих флажкам, которые вы хотите обновить.
Ответ №5:
Попробуйте этот подход. вы можете установить как отдельный флажок, так и флажок для всех.
class App extends React.Component {
items = ['EN', 'IT', 'FR', 'GR', 'RU'];
state = {
checkAll: false,
items : [
{'label': 'EN', 'checked': false},
{'label': 'IN', 'checked': false},
{'label': 'FR', 'checked': false},
]
};
render() {
return (
<div>
Check All
<input type="checkbox" onChange={this.handleCheckAll} />
<table>
{
this.state.items.map((item, i) => (
<tr key={i}>
<td>
<input type="checkbox" checked={item.checked} />
</td>
<td>{item.label}</td>
</tr>
))
}
</table>
</div>
);
}
handleCheckAll = () => {
let checkAll = !this.state.checkAll;
let items = this.state.items;
items.map((item, i) => {
item.checked = checkAll;
});
this.setState({
checkAll,
items
});
}
}