Блог

Главная - Вопросы по программированию - Отредактируйте значение ячейки таблицы, нажав на кнопку редактирования — Реагировать

Отредактируйте значение ячейки таблицы, нажав на кнопку редактирования — Реагировать

#reactjs #bootstrap-4 #html-table

#reactjs #bootstrap-4 #html-таблица

Вопрос:

Я хочу добиться приведенной ниже функциональности в react. Как я могу это сделать?

Пожалуйста, обратитесь к изображениям.

Измените ячейку таблицы в поле ввода

img_table_cell

Редактируемые ячейки в таблице

img_editable_cell

Ответ №1:

Вы можете сделать что-то вроде этого:

 const ConditionalField = ({
  value, mode, onChange,
  editValue,
}) => {
  let cmp;
  switch(mode) {
    case 'edit':
    cmp = <input
      placeholder="First Name"
      value={editValue}
      onChange={onChange}
    />
    break;
    case 'view':
      cmp = <p>{value}</p>
    break;
    default:
  }
  return cmp
}

const ShowHide = React.memo(({show, children}) => show amp;amp; children)

function App({
  onClickCancel, onClickEdit, onClickSave,
  mode, value, editValue, onChange,
  isSaveAndCancelDisabled, isEditDisabled
}) {
  return (
    <table>
      <tbody>
          <tr>
            <td style={{width: '200px'}}>
              <ConditionalField
                mode={mode}
                value={value}
                onChange={onChange}
                editValue={editValue}
              />
            </td>
            <td>
            <p>
              <ShowHide show={!isEditDisabled}>
                <button
                    onClick={onClickEdit}
                    disabled={isEditDisabled}
                    type="button"
                    >
                    Edit
                  </button>
              </ShowHide>
                <ShowHide show={!isSaveAndCancelDisabled}>
                  <button
                    onClick={onClickSave}
                    type="button"
                    disabled={isSaveAndCancelDisabled}
                  >
                    Update
                </button>
                <button
                  onClick={onClickCancel}
                  disabled={isSaveAndCancelDisabled} type="button"
                >
                  Cancel
                </button>
                </ShowHide>
            </p>
            </td>
          </tr>
      </tbody>
    </table>
  );
}

const MyApp = () => {
  const [value, setValue] = React.useState('James Bond')
  const [editValue, setEditValue] = React.useState('')
  const [mode, setMode] = React.useState('view')
  const onClickEdit = React.useCallback(() => {
    setEditValue(value)
    setMode('edit')
  },[value]);
  const onClickCancel = React.useCallback(() => {
    setMode('view')
  },[])
  const onChange = React.useCallback((e) => {
    const val = e.target.value;
    setEditValue(val)
  }, [])
  const onClickSave = React.useCallback((e) => {
    setValue(editValue);
    setMode('view')
  },[editValue])
  const isEditDisabled = React.useMemo(
    () => mode === 'edit',
    [mode]
  )
  const isSaveAndCancelDisabled = React.useMemo(
    () => mode === 'view',
    [mode]
  )
  const fieldStyle = React.useMemo(()=> ({width: '200px'}),[])
  return (<App
    fieldStyle={fieldStyle}
    value={value}
    editValue={editValue}
    mode={mode}
    onClickEdit={ onClickEdit}
    onClickCancel={onClickCancel}
    onClickSave={onClickSave}
    onChange={onChange}
    isEditDisabled={isEditDisabled}
    isSaveAndCancelDisabled={isSaveAndCancelDisabled}
  />)
};

const root = document.getElementById('root');

ReactDOM.render(<MyApp />, root)  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Удачи…

Ответ №2:

я создал небольшой POC для приведенной выше постановки задачи. Вы можете найти его здесь https://codesandbox.io/s/react-form-table-3wzc2

Посмотрите, поможет ли это.

Комментарии:

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