Загрузочный стол, редактируемый на значке, нажимает

Question

Я использую таблицу загрузки в своем приложении-ответе. Я хочу иметь такую ​​функциональность: в каждой строке я хочу значок редактирования, который при щелчке должен сделать все элементы строки редактируемыми. В настоящее время у меня есть стол, подобный этому

<Table className='flags-table' responsive hover> 
        <thead> 
        <tr> 
         <th></th> 
         <th> Time In</th> 
         <th> Time Out</th> 
         <th> Type</th> 
         <th> Category</th> 
        </tr> 
        </thead> 
        <tbody> 
        { 
         that.props.tag_fetch_reducer.tags.map((x, i) => (
          <tr key={i} onClick={this.handleRowClick.bind(this, i)}> 
           <td> 
            <div className='red-box'></div> 
           </td> 
           <td> {x.frame_in} </td> 
           <td> {x.frame_out} </td> 
           <td> {x.tagname} </td> 
           <td> {x.category}</td> 
          </tr> 
         )) 
        } 
        </tbody> 
       </Table> 

Как его сделать доступным для редактирования?

Answer 1

Я не могу предоставить весь код для редактируемой таблицы, но я, безусловно, могу показать вам, как это сделать.

Если вы хотите, вы можете предоставить таблицу, в которой все столбцы будут отключены. Поэтому, когда пользователь нажимает на значок редактирования, все запрещенные поля ввода будут включены, а затем вы сможете редактировать эти поля. Вы можете сохранить отключенное и включенное состояние в состоянии реакции или сокращения.

that.props.tag_fetch_reducer.tags.map((item, index) => (
    <tr key={index}> 
     <td> 
     <input type="text" value={item.frame_in} disabled={this.isDisabled(index)}/> 
     </td> 
     <td> 
     <input type="text" value={item.frame_out} disabled={this.isDisabled(index)} /> 
     </td> 
     <td> 
     <input type="text" value={item.tagName} disabled={this.isDisabled(index)} /> 
     </td> 
     <td> 
     <input type="text" value={item.category} disabled={this.isDisabled(index)} /> 
     </td> 
     <td> 
     <button onClick={this.handleRowClick.bind(this, index)}> 
      Edit 
     </button> 
    </td> 
</tr> 
); 

Где isDisabled функция, которая будет выглядеть в текущем состоянии проверить, является ли поле в частности, индекс отключен или нет.

Или, если вам не нравится вышеуказанный подход. Вы можете создать таблицу, как показано ниже.

that.props.tag_fetch_reducer.tags.map((item, index) => (
    <tr key={index}> 
    <td> 
     {item.id} 
     <input type="text" value={item.frame_in} style={this.showStyle(index)}/> 
    </td> 
    <td> 
     {item.name} 
     <input type="text" value={item.frame_out} style={this.showStyle(index)} /> 
    </td> 
    <td> 
     {item.name} 
     <input type="text" value={item.tagName} style={this.showStyle(index)} /> 
    </td> 
    <td> 
     {item.name} 
     <input type="text" value={item.category} style={this.showStyle(index)} /> 
    </td> 
    <td> 
     <button onClick={this.handleRowClick.bind(this, index)}> 
     Edit 
     </button> 
    </td> 
    </tr> 
); 

При таком подходе вы можете сохранить часть дисплея и часть редактирования отдельно друг от друга. Здесь, в начале стиля для всех полей ввода будет display: 'none'. Теперь, когда пользователь нажимает кнопку редактирования. Вы можете изменить стиль этой конкретной строки и сделать все поля ввода в определенной строке видимыми.

Помимо этого, если вы не хотите предоставлять редактируемые таблицы, вы можете создать отдельный компонент для редактирования. Когда пользователь нажимает на значок редактирования, будет отображаться новый компонент, в котором пользователь может редактировать все эти поля и нажать «отправить», чтобы сохранить все эти обновленные поля.

Это все, что я могу сказать.

С быстрым поиском google я нашел некоторые ресурсы, которые могут вам определенно помочь.

React Data Grid Examples

Editable react table example on JSFiddle и explanation

Надеется, что это помогает :)