-1
votes

Comment mettre sur la colonne de tables de données?

Alors, essayé d'utiliser des données de DataTable dans ReactJS, je veux mettre un onclick dans la colonne, mais obtenir une erreur.

suivi est mon code: p>

const $ = require('jquery')
$.DataTable = require('datatables.net')
class Rmsdatatable extends Component {
    constructor(props) {
        super(props)
        this.handletableclick = this.handletableclick.bind(this)
    }
    handletableclick(event) {
        console.log(event)
    }
    componentDidUpdate() {
        console.log(this.props.data)
        this.$el = $(this.el)
        this.$el.DataTable(
            {
                data: this.props.data,
                scrollY: 520,
                paging: false,
                responsive: true,
                columns: [
                    {
                        data: "vfdSno",
                        render: function (data, type, row) {
                            return '<a onClick={' + this.handletableclick.bind(this, row) + '} >' + data + '</a>'
                        }
                    },
                    { data: "customerName" },
                    { data: "district" },
                    { data: "state" }
                ]
            }
        )
    }
    render() {
        return (
            <div style={{ 'padding': '10px' }} className="col-xs-10">
                <table id="example" className="display" width="100%" ref={el => this.el = el}>
                    <thead>
                        <tr>
                            <th>VFD/Controller No</th>
                            <th>Beneficiary</th>
                            <th>District</th>
                            <th>State</th>
                        </tr>
                    </thead></table>
            </div>

        )
    }
}

reactjs datatables

0 commentaires

4 Réponses :

0
votes

return (<a onClick={ this.handletableclick.bind(this, row) }>{ data }</a>)
Replace current return statement with the one from above. You don't need to return a string of your html tag.

2 commentaires

Il suffit de supprimer la fonction de maintableclick de la composante et de la créer sous forme de: const Handlebleclick = () => {// Faites votre chose} que d'appeler sans cela.

A tenté. pas de chance.

0
votes

Essayez ceci xxx

au lieu de xxx

0 commentaires

0
votes

Cela semble être un problème d'étendue. Essayez ce qui suit: xxx

1 commentaires

Pouvez-vous télécharger un exemple de code en direct qui reproduit ce problème? Cela nous aidera à trouver le problème rapidement

7
votes

Pouvez-vous essayer comme ceci:

 columnDefs: [
            {
                targets: 1,
                createdCell: (td, cellData, rowData, row, col) =>
                  ReactDOM.render(
                    <button
                      onClick={() => this.handletableclick(row) }>
                     data
                    </button>, td),
              } 
        ]

2 commentaires

Cette réponse devrait être acceptée par la personne qui a posé la question posée. Parce que je suis confronté à la même question et à ce que le "CreatCell" a fait le travail pour moi.

Ceci est la solution correcte pour ce problème. Il m'a fallu des âges pour le trouver. Merci!