Javascript 在React中选择/取消选择自定义表中的行_Javascript_Reactjs

Javascript 在React中选择/取消选择自定义表中的行

javascript reactjs

Javascript 在React中选择/取消选择自定义表中的行,javascript,reactjs,Javascript,Reactjs,我有一个表组件，每行和标题上都有复选框。除此之外，每一行都有从objectdataSet数组中呈现的名字、姓氏和年龄。我希望通过单击标题中的复选框并捕获所有数据，能够选择/取消选择所有行同时，我还希望能够选择/取消选择单个行。同样，我希望捕获所选每一行的数据以下是组件： class Table extends React.Component { render() { return( <table style={{width:"100%"

我有一个表组件，每行和标题上都有复选框。除此之外，每一行都有从object

dataSet

数组中呈现的名字、姓氏和年龄。我希望通过单击标题中的复选框并捕获所有数据，能够选择/取消选择所有行

同时，我还希望能够选择/取消选择单个行。同样，我希望捕获所选每一行的数据

以下是组件：

class Table extends React.Component {
    render() {
        return( 
            <table style={{width:"100%"}}>
              <tr>
                <th><input type="checkbox" name="name1" /></th>
                <th>Firstname</th>
                <th>Lastname</th> 
                <th>Age</th>
              </tr>
                <tbody>{this.renderRow()}</tbody>
            </table>
        );
    }

    renderRow = () => {
        const dataSet = [
            {
                FirstName: "Bob",
                LastName: "Ross",
                Age: 50
            },
            {
                FirstName: "John",
                LastName: "Doe",
                Age: 20
            },
            {
                FirstName: "Jane",
                LastName: "Doe",
                Age: 30
            }
        ];

        return dataSet.map((item) => {
            return (
                <tr>
                    <td><input type="checkbox" name="name1" /></td>
                    <td>{item.FirstName}</td>
                    <td>{item.LastName}</td>
                    <td>{item.Age}</td>
                </tr>
            )
        })
    }
};

类表扩展了React.Component{
render（）{
报税表（
名字
姓氏
年龄
{this.renderRow（）}
);
}
renderRow=（）=>{
常量数据集=[
{
名字：“鲍勃”，
姓：“罗斯”，
年龄:50
},
{
名字：“约翰”，
姓：“Doe”，
年龄:20
},
{
名字：“简”，
姓：“Doe”，
年龄:30
}
];
返回dataSet.map（（项）=>{
返回(
{item.FirstName}
{item.LastName}
{item.Age}
)
})
}
};

下面是该组件的运行版本：

首先，您需要为每个项目提供某种类型的

id

，以便在映射它们时可以将它们彼此区分开来并给它们一个

键：
const dataSet = [
    {
        id: 45612,
        FirstName: "Bob",
        LastName: "Ross",
        Age: 50
    },
    {
        id: 6542,
        FirstName: "John",
        LastName: "Doe",
        Age: 20
    },
    {
        id: 7837,
        FirstName: "Jane",
        LastName: "Doe",
        Age: 30
    }
];

添加密钥：
return (
    <tr key={item.id}>

类中的接收函数将声明如下，可以接收项目，然后单击事件：
rowSelected = rowData => ev => {

现在最棘手的部分是将状态设置为包含每个选定行。如果复选框被选中，我们将把该项目添加到以前选择的项目中，如果没有，我们将从数组中筛选出该项目：
rowSelected = rowData => ev => {
    this.setState(prev => ({ 
        selection:  ev.target.checked ? [...prev.selection, rowData] : prev.selection.filter(item => item.id !== rowData.id)
    }))
}

您现在可以访问this.state.selection

完整代码：
class Table extends React.Component {

    rowSelected = rowData => ev => {
        this.setState(prev => ({ 
            selection:  ev.target.checked ? [...prev.selection, rowData] : prev.selection.filter(item => item.id !== rowData.id)
        }))
    }

    render() {
        return (
            <table style={{ width: "100%" }}>
                <tr>
                    <th><input type="checkbox" name="name1" /></th>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Age</th>
                </tr>
                <tbody>{this.renderRow()}</tbody>
            </table>
        );
    }

    renderRow = () => {
        const dataSet = [
            {
                id: 45612,
                FirstName: "Bob",
                LastName: "Ross",
                Age: 50
            },
            {
                id: 6542,
                FirstName: "John",
                LastName: "Doe",
                Age: 20
            },
            {
                id: 7837,
                FirstName: "Jane",
                LastName: "Doe",
                Age: 30
            }
        ];

        return dataSet.map((item) => {
            return (
                <tr key={item.id}>
                    <td><input type="checkbox" name="name1" onClick={this.rowSelected(item)}/></td>
                    <td>{item.FirstName}</td>
                    <td>{item.LastName}</td>
                    <td>{item.Age}</td>
                </tr>
            )
        })
    }
};

如果上一个选择中已经有元素，它将被清空，如果它没有任何内容，它将被替换为整个数据集；您需要将其存储在其他地方，如类外或this.dataset
中
如果您希望自动勾选复选框，则需要在相应的项目处于您的状态时，通过以下方式设置其已勾选的道具（IIRC）：
<input type="checkbox" name="name1" onClick={this.rowSelected(item)} checked={this.state.selection.some(slc => slc.id === item.id)}/>

slc.id==item.id）}/>
发生了什么变化：
class Table extends React.Component {
    state = {
        header: false,
        fields: [],
        dataSet: []
    }

    changeAllCheckBox = () => {
            let {
                header,
                fields,
        } = this.state
        let newHeader = !header
        let newFields = fields.map((f) => {
            return {
                checked: newHeader,
                data: f.data
            }   
        })
        this.setState({
            fields: newFields,
            header: newHeader
        })
    }

    changeCheckBoxFields = (item, index) => {
        let newState = this.state.fields
        newState[index] = {
              check: !newState[index],
              data: item
        }
        this.setState({fields: newState})
    }

    componentDidMount() {
        const dataSet = [
            {
                FirstName: "Bob",
                LastName: "Ross",
                Age: 50
            },
            {
                FirstName: "John",
                LastName: "Doe",
                Age: 20
            },
            {
                FirstName: "Jane",
                LastName: "Doe",
                Age: 30
            }
        ];
      let fields = dataSet.map((d, i) => {return {checked: false} } )
      this.setState({
            dataSet: dataSet,
            fields: fields,
      })
    }

    render() {
        return( 
            <table style={{width:"100%"}}>
              <tr>
                <th><input type="checkbox" name="name1" onChange={this.changeAllCheckBox} /></th>
                <th>Firstname</th>
                <th>Lastname</th> 
                <th>Age</th>
              </tr>
                <tbody>{this.renderRow()}</tbody>
            </table>
        );
    }

    renderRow = () => {

        return this.state.dataSet.map((item, index) => {                
            return (
                <tr key={index}>
                    <td>
                        <input type="checkbox" name="name1" onChange={() => this.changeCheckBoxFields(item, index)}  checked={this.state.fields[index].checked} />
                    </td>
                    <td>{item.FirstName}</td>
                    <td>{item.LastName}</td>
                    <td>{item.Age}</td>
                </tr>
            )
        })
    }
};

首先，您需要保持复选框的状态，您可以在这部分代码中设置一个默认值，以防您希望某些复选框开始选中：
state = {
    header: false,
    fields: [false, false, false, false]
}

现在，当某些复选框更改时，您需要处理程序。

有很多方法可以做到这一点，但为了简化，我使用了两个函数
接收要更改的复选框索引的changeCheckbox字段
，以及更改标题复选框和所有其他复选框值的changeAllCheckBox
，将具有与他相同的值
正在运行的完整代码
完整代码：
class Table extends React.Component {
    state = {
        header: false,
        fields: [],
        dataSet: []
    }

    changeAllCheckBox = () => {
            let {
                header,
                fields,
        } = this.state
        let newHeader = !header
        let newFields = fields.map((f) => {
            return {
                checked: newHeader,
                data: f.data
            }   
        })
        this.setState({
            fields: newFields,
            header: newHeader
        })
    }

    changeCheckBoxFields = (item, index) => {
        let newState = this.state.fields
        newState[index] = {
              check: !newState[index],
              data: item
        }
        this.setState({fields: newState})
    }

    componentDidMount() {
        const dataSet = [
            {
                FirstName: "Bob",
                LastName: "Ross",
                Age: 50
            },
            {
                FirstName: "John",
                LastName: "Doe",
                Age: 20
            },
            {
                FirstName: "Jane",
                LastName: "Doe",
                Age: 30
            }
        ];
      let fields = dataSet.map((d, i) => {return {checked: false} } )
      this.setState({
            dataSet: dataSet,
            fields: fields,
      })
    }

    render() {
        return( 
            <table style={{width:"100%"}}>
              <tr>
                <th><input type="checkbox" name="name1" onChange={this.changeAllCheckBox} /></th>
                <th>Firstname</th>
                <th>Lastname</th> 
                <th>Age</th>
              </tr>
                <tbody>{this.renderRow()}</tbody>
            </table>
        );
    }

    renderRow = () => {

        return this.state.dataSet.map((item, index) => {                
            return (
                <tr key={index}>
                    <td>
                        <input type="checkbox" name="name1" onChange={() => this.changeCheckBoxFields(item, index)}  checked={this.state.fields[index].checked} />
                    </td>
                    <td>{item.FirstName}</td>
                    <td>{item.LastName}</td>
                    <td>{item.Age}</td>
                </tr>
            )
        })
    }
};

类表扩展了React.Component{
状态={
标题：false，
字段：[]，
数据集：[]
}
changeAllCheckBox=（）=>{
让{
标题，
领域，
}=这个州
让newHeader=！header
让newFields=fields.map（（f）=>{
返回{
选中：newHeader，
数据：f.data
}   
})
这是我的国家({
字段：newFields，
标题：newHeader
})
}
changeCheckBoxFields=（项目，索引）=>{
让newState=this.state.fields
新闻状态[索引]={
选中：！newState[索引]，
数据：项目
}
this.setState（{fields:newState}）
}
componentDidMount（）{
常量数据集=[
{
名字：“鲍勃”，
姓：“罗斯”，
年龄:50
},
{
名字：“约翰”，
姓：“Doe”，
年龄:20
},
{
名字：“简”，
姓：“Doe”，
年龄:30
}
];
让fields=dataSet.map（（d，i）=>{return{checked:false}）
这是我的国家({
数据集：数据集，
字段：字段，
})
}
render（）{
报税表（
名字
姓氏
年龄
{this.renderRow（）}
);
}
renderRow=（）=>{
返回this.state.dataSet.map（（项，索引）=>{
返回(
this.changeCheckBoxFields（item，index）}checked={this.state.fields[index].checked}/>
{item.FirstName}
{item.LastName}
{item.Age}
)
})
}
};

有关react check中输入的更多信息
编辑：仅检查完整代码现在您可以拥有任意多的行，您可以获取数据，如果选中或未选中，则在您提供的当前代码版本的组件状态下，你没有他要求的位置我想通过点击标题中的复选框来选择/取消选择所有行
@Vencovsky is right。。。这给了我数据，但没有办法选择/取消选择所有行。谢谢你的回答，我的思路是正确的。我正在使用一个自定义复选框组件，该组件具有
class Table extends React.Component {
    state = {
        header: false,
        fields: [],
        dataSet: []
    }

    changeAllCheckBox = () => {
            let {
                header,
                fields,
        } = this.state
        let newHeader = !header
        let newFields = fields.map((f) => {
            return {
                checked: newHeader,
                data: f.data
            }   
        })
        this.setState({
            fields: newFields,
            header: newHeader
        })
    }

    changeCheckBoxFields = (item, index) => {
        let newState = this.state.fields
        newState[index] = {
              check: !newState[index],
              data: item
        }
        this.setState({fields: newState})
    }

    componentDidMount() {
        const dataSet = [
            {
                FirstName: "Bob",
                LastName: "Ross",
                Age: 50
            },
            {
                FirstName: "John",
                LastName: "Doe",
                Age: 20
            },
            {
                FirstName: "Jane",
                LastName: "Doe",
                Age: 30
            }
        ];
      let fields = dataSet.map((d, i) => {return {checked: false} } )
      this.setState({
            dataSet: dataSet,
            fields: fields,
      })
    }

    render() {
        return( 
            <table style={{width:"100%"}}>
              <tr>
                <th><input type="checkbox" name="name1" onChange={this.changeAllCheckBox} /></th>
                <th>Firstname</th>
                <th>Lastname</th> 
                <th>Age</th>
              </tr>
                <tbody>{this.renderRow()}</tbody>
            </table>
        );
    }

    renderRow = () => {

        return this.state.dataSet.map((item, index) => {                
            return (
                <tr key={index}>
                    <td>
                        <input type="checkbox" name="name1" onChange={() => this.changeCheckBoxFields(item, index)}  checked={this.state.fields[index].checked} />
                    </td>
                    <td>{item.FirstName}</td>
                    <td>{item.LastName}</td>
                    <td>{item.Age}</td>
                </tr>
            )
        })
    }
};