如何在手柄按钮中获取被点击行的值？

Question

你不需要看到链接和其他组件比表

import React, { Fragment } from "react";
import { connect } from "react-redux";
import { TradeStateData, loadTradeStateDataSocket } from "../../actions";
import io from "socket.io-client";
import { Menu , Button} from "semantic-ui-react";
import { Link } from "react-router-dom";
import AddModal from './AddModal';
import { ButtonToolbar } from "react-bootstrap";
// import App from "./app";

let columns = [
  "ClientID",
  "Algo",
  "STOPER",
  "Start/Stop Status",
  "LossLimit",
  "Quantity_Multiple",
  "Trade Limit Per Day",
  "Quantity Limit Per Trade",
  "Lot Size",
  "Slice Size",
  "Wait Time",
  "Trade Limit Per Second",
];
let socket;
// let status;
// let buy_sell_flag;
// let cancelrejectreason_flag;

class TradeState extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      showModal:false
    }
    this.handlebutton = this.handlebutton.bind(this);
    const { dispatch } = this.props;
    //    console.log(dispatch)
    // console.log(this.props)
    //socket = io.connect("http://192.168.0.103:5009");
    socket = io.connect("http://192.168.43.179:5009");
    dispatch(loadTradeStateDataSocket(socket));

    socket.on("TradeStateToggler_data", (res) => {
      dispatch(TradeStateData(res));
    });
  }

  handlebutton = (algoname,clientid) => {
    fetch("http://127.0.0.1:5000/updatetable", {
      method: "POST",
      headers: {
        "Content-type": "application/json",
      },
      body: JSON.stringify({"algoname":algoname,"clientid":clientid}),

    })
    this.setState({showModal:false})
    console.log("heyaaakomalu", {"algoname":algoname,"clientid":clientid});

  };



  toggle=()=>{
    this.setState({showModal:true})
  }




  // componentWillUnmount() {
  //     socket.disconnect()
  //     console.log('Socket Disconnected')
  // }

  render() {
    let closeModal=()=>this.setState({showModal:false})
    // console.log(this.props)
    return (
      <Fragment>
        <Menu style={{ margin: 0 }}>
          <a href="tradestatetoggler">
            <Menu.Item active={true}>ALL</Menu.Item>
          </a>
          <Link to="/d18138status">
            <Menu.Item>D18138</Menu.Item>
          </Link>
          <Link to="/d7730001status">
            <Menu.Item>D7730001</Menu.Item>
          </Link>

          <Link to="/d7730003status">
            <Menu.Item>D7730003</Menu.Item>
          </Link>
          <Link to="/d7730004status">
            <Menu.Item>D7730004</Menu.Item>
          </Link>
          <Link to="/d7730005status">
            <Menu.Item>D7730005</Menu.Item>
          </Link>
          <Link to="/d7730006status">
            <Menu.Item>D7730006</Menu.Item>
          </Link>
          <Link to="/d7730007status">
            <Menu.Item>D7730007</Menu.Item>
          </Link>
          <Link to="/d7730008status">
            <Menu.Item>D7730008</Menu.Item>
          </Link>
          <Link to="/d7730009status">
            <Menu.Item>D7730009</Menu.Item>
          </Link>
          <Link to="/d8460002status">
            <Menu.Item>D8460002</Menu.Item>
          </Link>
          <Link to="/d8460003status">
            <Menu.Item>D8460003</Menu.Item>
          </Link>
          <Link to="/V7410004status">
            <Menu.Item>V7410004</Menu.Item>
          </Link>
        </Menu>

**你可以在这里开始观看

        <table className="ui celled table">
          <thead>
            <tr>
              {columns.map((col) => (
                <th key={col}>{col}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {this.props.data.map((row) => {
              // console.log(this.props.data);
              // if (row.buy_sell === "BUY") buy_sell_flag = "positive";
              // else buy_sell_flag = "negative";

              // if (row.cancelrejectreason !== "")
              //   cancelrejectreason_flag = "negative";
              // else cancelrejectreason_flag = "";

              if (row.Start_Stop !== "STOP")
                return (
                  <tr key={row._id}>
                    <td>{row.ClientID}</td>
                    <td>{row.algoname}</td>   
                    <td>
                      <Button color="red" onClick={this.toggle}>STOP </Button>  
                      <AddModal
                        show={this.state.showModal}
                        onHide={closeModal}
                        sendAll={()=>this.handlebutton(row.algoname,row.ClientID)}/> 

**在这个模态中，我想要的是被点击的行的值，但我得到的却是最后渲染的行的值**。

                    </td>
                    <td>{row.Start_Stop}</td>
                    <td>{row.losslimit}</td>
                    <td>{row.quantity_multiple}</td>
                    <td>{row.TradeLimitPerDay}</td>
                    <td>{row.QuantityLimitPerTrade}</td>
                    <td>{row.lotSize}</td>
                    <td>{row.sliceSize}</td>
                    <td>{row.waitTime}</td>
                    <td>{row.tradeLimitPerSecond}</td>
                  </tr>
                );
              return null;
            })}
          </tbody>
        </table>
      </Fragment>
    );
  }
}

const MapStateToProps = (state) => {
  // console.log(state);
  let sortedstate = state.TradeState;
  const sorted = {
    data: sortedstate.sort((a, b) => b.ClientID.localeCompare(a.ClientID)),
  };
  return sorted;
};

export default connect(MapStateToProps)(TradeState);

如何获取当前行的值，而不是上次渲染的行的值？addmodal包含的只是一个普通的模式，请帮助我。

Answer 1

你需要做的是这样的事情。我不知道你的数据项是否有每个项目的唯一ID。这是你可以做到的一种方式

当你 .map 在您的数据上，您应该总是添加一个 key 支撑物到第一个组件，渲染出类似这样的内容。

data.map((row) => {
  return <div key={row._id}>{row._id}</div>
})

然后你应该做的是将数据传递给你的 AddModal 这样的组件。

<AddModal data={data[index]} />

这样，你的模态将只获得用户点击的数据。