处理React.js上的单元格点击状态

Question

I have this state defined:

constructor(props){
        super(props);

        this.state = {
            posts:[],
            post:{},
            openNew:false,
            openModify:false
        };
    }

With the following function which contains a fetch, I recieve an array of objects with responseData:

getPosts(){
        fetch(
            DOMAIN+'/api/posts/', {
                method: 'get',
                dataType: 'json',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization':'Bearer '+this.props.token
                }
            })
            .then((response) =>
            {
                return response.json();
            })
            .then((responseData) => {
                this.setState({posts:responseData});
                console.log("Log del responseData de posts");
                console.log(responseData);
            })
            .catch(function() {
                console.log("error");
            });
    }

This function is called in componentDidMount :

componentDidMount(){
        this.getPosts()
    }

The JSON object obtained from the fetch and kept within this.state.products looks like this:

As shown previously in the fetch, with this line this.setState({posts:responseData}); I can pass posts to the table where I want title , date and hour to be displayed:

<DataTables
    height={'auto'}
    selectable={false}
    showRowHover={true}
    columns={CAMPAIGN_TABLE_COLUMNS}
    data={this.state.posts}
    showCheckboxes={false}
    rowSizeLabel="Filas por página"
    onCellClick={this.handleOpenModify.bind(this)}
                />

The table called is:

const CAMPAIGN_TABLE_COLUMNS = [
    {
        key: 'title',
        label: 'Título',
        style:{width: '40%'}
    }, {
        key: 'created',
        label: 'Fecha',
        style:{width: '30%'},
        render: (DateToFormat) => {
            return moment(DateToFormat).format("DD/MM/YYYY");
        }
    }, {
        key: 'created',
        label: 'Hora',
        style:{width: '30%'},
        render: (DateToFormat) => {
            return moment(DateToFormat).format("hh:mm:ss");
        }
    }
];

With all of this I am able to print the data that I want on the table, looking like this:

What I am not able to do is: When I click on a row of the table to pass the values that were previously printed, such as the title.

This dialog is constructed using the following lines:

                 <Dialog
                    title="Modificar Post"
                    actions={actions}
                    modal={false}
                    open={this.state.openModify}
                    onRequestClose={this.handleClose}
                    titleClassName="dialog-title"
                    contentStyle={{width:660}}
                    autoScrollBodyContent={true}
                >
                    <TextField
                        fullWidth={true}
                        floatingLabelText="Título"
                        errorText="¡Ups! No deberías ver este mensaje."
                        defaultValue={this.state.posts.title}
                    />
                </Dialog>

I thought that binding this to handleOpenModify (the function that is called when you click on a row of the table):

handleOpenModify = () => {
        this.getPosts();
        this.setState({openModify: true});
    };

Would allow me to print the title within the TextField as simple as giving to the defaultValue this.state.posts.title , but is not working as you can see on the last picture that I added.

PD: I call getPosts() in handleOpenModify in case it had to be called again when a row is clicked, but it hasn't worked either.

Any suggestions?

Answer 1

DataTables provides you the rowNumber and columnIndex as arguments.

For more information, check their docs: https://github.com/hyojin/material-ui-datatables/blob/master/src/DataTables/DataTablesRow.js#L142

<DataTables
  ...
  onCellClick={(event, rowNumber) => console.log('selectedPost', this.state.posts[rowNumber]) }
/>

Answer 2

this is a sample on how to bind and retrieve specific data on click of cell

list item creation

var list = CAMPAIGN_TABLE_COLUMNS.map((data, key) =>
    <td onClick={this.handleClick.bind(this, key)}>{data.title}</td>
)

onClick handler

handleClick(id) {
    let item = CAMPAIGN_TABLE_COLUMNS[id]; // item data
}

as for your current code, you need to modify this part

onCellClick={this.handleOpenModify.bind(this)} // key or the array index

handleOpenModify(e, row, key) { // receive the column number as 3rd param
  let item = CAMPAIGN_TABLE_COLUMNS[key]; // now get the respective object
}

Answer 3

Thanks to @EdwardChopuryan and @Semi-Friends I've been able to retrieve the data that I wanted.

First of all I had to change the name of my function handleOpenModify to handleCellClick , since I could pass through the row parameter all I wanted and keep it within post {} , declared before in the sate.

handleCellClick = (y,x,row) => {
        this.getPosts();
        this.setState({
            openModify: true,
            newForm:false,
            post:{...row, _id:row._id,title:row.title}})
    };

Then, on DataTable , bind it on the onCellClick parameter:

<DataTables
    height={'auto'}
    selectable={false}
    showRowHover={true}
    columns={CAMPAIGN_TABLE_COLUMNS}
    data={this.state.posts}
    showCheckboxes={false}
    rowSizeLabel="Filas por página"
    onCellClick={this.handleCellClick.bind(this)}
                />

And call the value that I wanted on the TextField through the defaultValue :

<TextField
      fullWidth={true}
      floatingLabelText="Título"
      errorText="¡Ups! No deberías ver este mensaje."
      defaultValue={this.state.post.title}
           />

And this is the result!