时间戳

首页 > 解决方案 > 当我使用 React JS 按下编辑按钮时，是否可以将响应数据设置为状态？

javascript - 当我使用 React JS 按下编辑按钮时，是否可以将响应数据设置为状态？

问题描述

我目前是 React js 的新开发者。当我单击编辑按钮时，我有关于将结果传递给每个文本框的问题。我目前使用 Bootstrap 表 V1 http://allenfang.github.io/react-bootstrap-table/。

当我单击按钮时，是否可以将响应数据传递给每个输入文本框。？

我将与你们分享我今天已经完成的示例工作。

我的功能： 

    function EditUser(row,cell) {
    axios.get('/api/geteditUser/'+cell).then(response => {
        console.log(response);
    }).catch(error => console.log(error));
}

function action_format(cell,row) {
    return <div><button onClick={() => EditUser(row,cell)}  className="btn btn-primary" style={{fontSize:14}} data-toggle="modal" data-target="#myModal"><i className="far fa-edit" style={{fontSize:14}}></i></button> <button style={{fontSize:14}}  className="btn btn-danger" data-toggle="modal" data-target="#myModal"><i className="fas fa-trash-alt" style={{fontSize:14}}></i></button></div>
}

引导表：

    <BootstrapTable data={this.state.list_user} pagination={ true } search options={ this.options } striped hover version='4'>
                            <TableHeaderColumn isKey dataField='id'>Id</TableHeaderColumn>
                            <TableHeaderColumn dataField='name'>Name</TableHeaderColumn>
                            <TableHeaderColumn dataField='email'>Email</TableHeaderColumn>
                            <TableHeaderColumn dataField='role' dataFormat={format}>Role</TableHeaderColumn>
                            <TableHeaderColumn dataField='status'>Status</TableHeaderColumn>
                            <TableHeaderColumn dataField='id' dataFormat={action_format}>Action</TableHeaderColumn>
      </BootstrapTable>

我的模态：

<form onSubmit={this.UpdateDriverStatus}>    
<div className="container-fluid">
    <div className="row">

        <div className="col-md-6">
        <label>Name</label>
        <input type="text" value={this.props.setUserid} className="form-control"></input>
        </div>
        <div className="col-md-6">
        <label>Email</label>
        <input type="text" className="form-control"></input>
        </div>

    </div>
    <br/>
    <div className="row">

        <div className="col-md-6">
        <label>Password</label>
        <input type="password" className="form-control"></input>

        </div>

        <div className="col-md-6">

        <label>Status</label>
        <input type="text" className="form-control"></input>
        </div>

    </div>
</div>
<br/>
<center><button type="submit" className="btn btn-primary col-md-6">Update</button></center>

标签： javascriptreactjsreact-bootstrap-table

解决方案

好的，因此仅传递响应，如果单击按钮，则必须将其保存在如下状态中：

function action_format(cell,row) {
    return <div><button onClick={() => {EditUser(row,cell)}; this.setState({passResponse: true}} ...}

这将保存是否应将响应数据推送到输入元素中。现在在你的渲染函数中实际推送数据：

<input type="text" value={this.state.passResponse ? this.state.response: this.props.setUserid} className="form-control"></input>

如果您完成了编辑，您应该将 passResponse 切换为 false。希望这可以帮助。快乐编码。

推荐阅读