Question

在从应用程序反应表组件中的选定行中获取数据并以Modal形式显示数据时，很难。我试图使用this.state.data.Issue来获取数据并发出警报，但是每次我单击表中特定行中的按钮时，它都会返回未定义的状态。有办法解决我的问题吗？因为此模式将用作管理员可以查看问题详细信息并批准或暂停报告的问题的表单。

这是我的代码：

class Sumbong extends Component {


    handleButtonClick = (e, row) => {
        this.setState({ visible: true});
    };

    constructor(props) {
        super(props);
        this.state = {
            name: [],
            createAt: '',
            data: []
        };
    }

    componentDidMount(){
        refs.on('value', snap => {
            let requests = [];
            snap.forEach(reqs => {

                let ID = reqs.key
                let reqObject = reqs.val();
                const {name, Issue, createAt, LocStamp, Status} = reqs.val();
                requests.push({ID, name, Issue, createAt, LocStamp, Status});
            })
            this.setState({data: requests})
            console.log('requests: ', requests);

        })
    }

 render() {

        const columns = [
            {
                Header: "uid",
                accessor: "ID",
                show: false
            },
            {
                Header: "Sender's Name",
                accessor: "name",
                style: {
                    fontSize: '13px'
                },
            },
            {
                Header: "Report Category",
                accessor: "Issue",
                style: {
                    fontSize: '13px'
                },
            },
            {
                Header: "Date Reported",
                accessor: "createAt",
                style: {
                    fontSize: '13px'
                },
            },
            {
                Header: "Location",
                accessor: "LocStamp",
                style: {
                    fontSize: '13px'
                },
            },
            {
                Header: "Status",
                accessor: "Status",
                style: {
                    fontSize: '13px'
                },
            },
            {
                Header: "Actions",
                accessor: "ID",
                filterable: false,
                Cell: ({ row }) => (
                    <div style={buttonTablestyle}>
                        <Button bsStyle="warning" onClick={e => this.handleButtonClick(e, row)}>Edit</Button>



                    </div>
                )
            },

        ]

        return (
            <div className="container">

                {this.state.visible && <Modal
                    title="title"
                    visible={this.state.visible}
                    onClickAway={() => this.closeModal()}
                >

                    <section>
                       {/*<p> {this.state.createdAt}dsds</p>*/}
                        {alert("Output: "+this.state.data.Issue)}
                    </section>

                </Modal>}

                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

                <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"
                      id="bootstrap-css"></link>
                <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
                <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

                <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
                        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
                        crossOrigin="anonymous"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
                        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
                        crossOrigin="anonymous"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
                        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
                        crossOrigin="anonymous"></script>
                {/*<---CSS & Bootstrap Scripts/Links*/}

                    <h2 className="h2_style">Sumbong Center</h2>


                {/*<div className="searchBar">*/}
                    {/*<input type="text" style={SearchBox_Sumbong} className="CircularInput" id="DocsSearchBar"*/}
                           {/*placeholder="Search applicant's name..."/>*/}
                {/*</div>*/}

                <ReactTable
                    style={tableFont}
                    filterable={true}
                    defaultFilterMethod={filterCaseInsensitive}
                    columns={columns}
                    defaultPageSize={5}
                    className="-striped -highlight"
                    data={this.state.data}
                >



                </ReactTable>


            </div>
        );
    }
}
export default Sumbong;

Answer 1

如果需要共享状态数据的组件未通过父子关系紧密链接（这将使数据难以通过道具传递），则您可能需要考虑将相关状态移至状态管理库中，例如{ {3}}或在新版本的React中使用Redux。

从reacttable传递数据以响应模态

1 个答案: