मेरे पास केवल मार्कअप के साथ एक प्रतिक्रिया घटक परिणाम तालिका है, और सभी डेटा लाने का काम इसके कंटेनर ResultsTableContainer में किया जाता है और प्रतिपादन करते समय पारित किया जाता है।

परिणामतालिका.जेएसएक्स

const ResultsTable = ({ games, results }) => (
<Table>
<TableHeader>
  <TableRow>
    <TableHeaderColumn>Date</TableHeaderColumn>
    <TableHeaderColumn>City</TableHeaderColumn>
    <TableHeaderColumn>Venue</TableHeaderColumn>
    <TableHeaderColumn>Host</TableHeaderColumn>
  </TableRow>
</TableHeader>
<TableBody>
  {games.map((game, index) => (
    <TableRow key={index} onClick={(index) => results}>
      <TableRowColumn>
        {moment(game.gameDate).format("YYYY-MM-DD")}
      </TableRowColumn>
      <TableRowColumn>{game.city}</TableRowColumn>
      <TableRowColumn>{game.venueName}</TableRowColumn>
      <TableRowColumn>{game.hostName}</TableRowColumn>
    </TableRow>
  ))}
</TableBody>
</Table>
);

export default ResultsTable;

ResultsTableContainer.jsx

class ResultsTableContainer extends Component {
constructor(props) {
super(props);

this.state = {
  games: []
};
}

componentDidMount = () => {
 axios
  .get("public_api/games")
  .then(resp => {
    this.setState({
      games: resp.data
    });
  })
  .catch(console.error);
 };

handleClick = (i) => {
console.log('clicked' + i)
};

render() {
return (
  <ResultsTable
    games={this.state.games}
    results={this.handleClick.bind(this)}
  />
   );
 }
}

export default ResultsTableContainer;

मेरी चुनौती प्रत्येक तालिका पंक्ति को क्लिक करने योग्य बनाना है, ताकि पंक्ति पर क्लिक करने पर मुझे अधिक जानकारी मिल सके। हालांकि इस तरह से लिखना, फ़ंक्शन हैंडल क्लिक को निष्पादित नहीं करता है और जो मैंने पढ़ा है, वह चीजों को करने का सबसे अच्छा तरीका नहीं है, क्योंकि यह प्रत्येक पंक्ति के लिए एक नया फ़ंक्शन तैयार करेगा। तो मेरा सवाल यह होगा कि मैं ऑनक्लिक हैंडलर कैसे बना सकता हूं, यह जानने के लिए कि मैंने किस पंक्ति पर क्लिक किया है? या मैं इसे काम करने के लिए और क्या कर सकता हूं? इसके अलावा, वास्तव में सराहना करेंगे, अगर आप मुझे इस विषय के बारे में अच्छी तरह से पढ़ने के लिए इंगित कर सकते हैं। आपको धन्यवाद!

0
Donatas 20 सितंबर 2017, 14:49
यदि आप कार्य करते हैं तो आपको बांधना नहीं है (यह) एक तीर फ़ंक्शन है ^_^
 – 
Nicholas
20 सितंबर 2017, 15:08

2 जवाब

चूंकि आप पहले से ही handleClick के लिए एक तीर फ़ंक्शन का उपयोग कर रहे हैं, इसलिए आपको फ़ंक्शन को फिर से मैन्युअल रूप से बाइंड करने की आवश्यकता नहीं है। आप इसे केवल this.handleClick के रूप में उपयोग कर सकते हैं।

आपके द्वारा क्लिक की गई पंक्ति की अनुक्रमणिका/आईडी प्राप्त करने के लिए आप इस तरह कुछ कोशिश कर सकते हैं,

const ResultsTable = ({ games, onRowClick }) => (
<Table>
<TableHeader>
  <TableRow>
    <TableHeaderColumn>Date</TableHeaderColumn>
    <TableHeaderColumn>City</TableHeaderColumn>
    <TableHeaderColumn>Venue</TableHeaderColumn>
    <TableHeaderColumn>Host</TableHeaderColumn>
  </TableRow>
</TableHeader>
<TableBody>
  {games.map((game, index) => (
    <TableRow key={index} id={index} onClick={onRowClick}>
      <TableRowColumn>
        {moment(game.gameDate).format("YYYY-MM-DD")}
      </TableRowColumn>
      <TableRowColumn>{game.city}</TableRowColumn>
      <TableRowColumn>{game.venueName}</TableRowColumn>
      <TableRowColumn>{game.hostName}</TableRowColumn>
    </TableRow>
  ))}
</TableBody>
</Table>
);

export default ResultsTable;

class ResultsTableContainer extends Component {
constructor(props) {
super(props);

this.state = {
  games: []
};
}

componentDidMount = () => {
 axios
  .get("public_api/games")
  .then(resp => {
    this.setState({
      games: resp.data
    });
  })
  .catch(console.error);
 };

handleClick = (event) => {
  // event object from the onClick of the row will be passed
  // you can get the index of the row from the event target's id prop
  // rather than index, you can use an unique id of some sort too
  console.log(`clicked on row ${event.target.id}`);
};

render() {
return (
  <ResultsTable
    games={this.state.games}
    onRowClick={this.handleClick}
  />
   );
 }
}

export default ResultsTableContainer;
1
bennygenel 20 सितंबर 2017, 15:07
दुर्भाग्य से, यह काम नहीं किया। कंसोल.लॉग भी सादा स्ट्रिंग नहीं कर सकता।
 – 
Donatas
20 सितंबर 2017, 18:16
क्या आपने तालिका पंक्ति में `id={index}` भाग जोड़ा है?
 – 
bennygenel
20 सितंबर 2017, 18:30
हां, मैंने सभी सुझाए गए संशोधन, आईडी भी जोड़े हैं।
 – 
Donatas
20 सितंबर 2017, 22:43

ऐसा लगता है कि यह सामग्री UI तालिका घटक में एक बग से संबंधित था, जिसका मैं उपयोग कर रहा हूं। अधिक जानकारी: https://github.com/callemall/material-ui/issues/1783 . तो मैंने प्रत्येक पंक्ति के लिए बटन बनाना समाप्त कर दिया और अब सबकुछ काम करता है।

0
Donatas 21 सितंबर 2017, 18:31