मैं प्रतिक्रिया के लिए नया हूं और मैं एक बहुत ही बुनियादी टाइमशीट टूल बनाने की कोशिश कर रहा हूं, जहां उपयोगकर्ता एप्लिकेशन में कार्यों को जोड़ सकते हैं और सहेज सकते हैं। मैं प्रतिक्रिया के साथ-साथ टाइपप्रति का उपयोग कर रहा हूँ।

अब तक मेरे पास मेरा मुख्य घटक है जिसमें कार्यों और तालिका की एक खाली सरणी शामिल है। फिर टेबल बॉडी के अंदर मैंने टेबल पंक्तियों को खींचने के लिए मैप किया है और एक अलग घटक जिसमें टैग शामिल हैं।

तालिका के शीर्ष पर मैंने एक बटन शामिल किया है, जिस पर क्लिक करने पर एक नया कार्य सरणी बनाना चाहिए (ताकि राज्य को संशोधित न किया जा सके), फिर राज्य के लिए कॉनकैट विधि का उपयोग वस्तुओं की नई सरणी में करता है और नया कार्य जोड़ता है। जब 'आइटम जोड़ें' बटन पर क्लिक किया जाता है तो कुछ नहीं होता है, क्या कोई मुझे बता सकता है कि मैं क्या गलत कर रहा हूं? और अगर यह हासिल करने का यह सबसे अच्छा तरीका है?

मुख्य घटक:

import * as React from 'react';
import { ITimesheetToolProps } from './ITimesheetToolProps';
import { escape } from '@microsoft/sp-lodash-subset';
import TableRow from './TableRow';

export default class TimesheetTool extends React.Component<ITimesheetToolProps, any> {
  state = {
    tasks: []
  }

  addTask = (task) => {
    const tasks = [...this.state.tasks];
    this.setState({tasks: this.state.tasks.concat(task)});
  }

  public render(): React.ReactElement<ITimesheetToolProps, any> {
    return (
      <div>
        <button onClick={() => this.addTask}>Add Task</button>
        <table>
          <thead>
            <th>Project</th>
            <th>Task</th>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saaturday</th>
            <th>Sunday</th>
          </thead>
          <tbody>
            {this.state.tasks.map(task => <tr key={task}><TableRow /></tr>)}
          </tbody>
        </table>
      </div>
    );
  }
}

तालिका पंक्ति घटक को ऑनक्लिक जोड़ा जाना है:

import * as React from 'react';
import { ITimesheetToolProps } from './ITimesheetToolProps';

export default class TableRow extends React.Component<ITimesheetToolProps, {}> {
    public render() {
        return (
           <React.Fragment>
               <td><input type="text" name="project" /></td>
               <td><input type="text" name="task" /></td>
               <td><input type="number" name="mon" /></td>
               <td><input type="number" name="tues" /></td>
               <td><input type="number" name="wed" /></td>
               <td><input type="number" name="thurs" /></td>
               <td><input type="number" name="fri" /></td>
               <td><input type="number" name="sat" /></td>
               <td><input type="number" name="sun" /></td>
           </React.Fragment> 
        )
    }
}
4
Ellis1987 19 अक्टूबर 2019, 07:27

2 जवाब

सबसे बढ़िया उत्तर

समस्या प्रतिक्रिया के साथ नहीं बल्कि जावास्क्रिप्ट के साथ है। आप क्लिक हैंडलर को सही तरीके से लागू नहीं कर रहे हैं। इस तरह अपने हैंडलर फ़ंक्शन को आमंत्रित करें

<button onClick={this.addTask}>Add Task</button>

लेकिन फ़ंक्शन में आपको जो तर्क मिलेगा वह कार्य के बजाय बटन ईवेंट होगा।

या कार्य ऑब्जेक्ट के साथ कॉल करें जिसे मैं आपके घटक में नहीं देख सकता लेकिन मुझे लगता है कि यह कहीं प्रॉप्स से आ रहा है।

<button onClick={() => this.addTask(this.props.task)}>Add Task</button>
4
balmukund kumar 19 अक्टूबर 2019, 08:33

धन्यवाद, मैंने अपने बटन में कार्य को बुलाया और इससे मेरी समस्या हल हो गई।

0
Ellis1987 20 अक्टूबर 2019, 06:10