Конфликт в таблице дизайна React ant итоговый баланс ввода

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

Спасибо

здесь

Это часть моего кода

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => <a>{text}</a>,
  },
  {
    title: 'Book',
    dataIndex: 'book',
    key: 'book',
  },
  {
    title: 'Pen',
    dataIndex: 'pen',
    key: 'pen',
  },
  {
    title: 'Tools',
    key: 'tools',
    dataIndex: 'tools',

  },
  {
    title: 'Total',
    key: 'total',
       dataIndex: 'total',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    book: <Form.Item name="book1"  rules={[{required: true, message: " is required"}]}><Input style={{width: 150}}/></Form.Item>,
    pen: <Form.Item name="oen1"  rules={[{required: true, message: "is required"}]}><Input style={{width: 150}}/></Form.Item>,
   tools: <Form.Item name="tools1"  rules={[{required: true, message: " is required"}]}><Input style={{width: 150}}/></Form.Item>,
   total:'00000'
  },

];
 const onFinish = values => {
    console.log(values);
  };
ReactDOM.render( 
  <div> 
    <Form name="control-hooks" onFinish={onFinish}>
      <Table columns={columns} dataSource={data} />
      <div>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </div>
    </Form>
  </div>, document.getElementById('container'));

react-typescript antd
person core114    schedule 24.09.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

  1. Вам нужно государство. В ответ, чтобы что-то изменить в пользовательском интерфейсе (например, общий столбец), вам нужно состояние. Переведите свой массив данных в состояние.

    const [данные, setData] = useState ([...])

  2. Вам нужно знать, в какой строке был введен ввод при вводе. Вы можете добавить различие при вводе, равное ключу строки. Здесь я предлагаю поставить какое-нибудь число на имя входа:

    ‹Form.Item name = book-1› ... ‹/ Form.Item›

    ‹Form.Item name = pen-1› ... ‹/ Form.Item›

    ‹Имя Form.Item = tools-1› ... ‹/ Form.Item›

  3. Используйте onValuesChange опору <Form>, которую он запускает каждый раз, когда вы вводите ввод и возвращаете значения формы. Таким образом, вы можете извлечь число из имени входа и использовать его как ссылку, чтобы узнать, какая строка будет изменена, и выполнить setState.

Я также предлагаю использовать InputNumber вместо Input, если вам нужен только числовой ввод.

Вот рабочая ссылка. Вы можете начать / поиграть там, если я не ударил то, что вы хотите.

Вы также можете просмотреть редактируемые строки таблицы antd. Это может быть проще в использовании, чем это

person Chanandrei    schedule 24.09.2020