Блог

У меня есть форма, которая содержит поле ввода, которое динамически отображается из этого массива объектов.

 const searchParams = [
    {
      name: 'certificateNo',
      title: 'Certificate Number',
      state: false,
      value: '',
    },
    {
      name: 'oldCertificateNo',
      title: 'Old Certificate Number',
      state: false,
      value: '',
    },
    { name: 'shareVolume', title: 'Share Volume', state: false, value: '' },
    { name: 'accountNo', title: 'Account Number', state: false, value: '' },
    {
      name: 'oldAccountNo',
      title: 'Old Account Number',
      state: false,
      value: '',
    },
    { name: 'rin', title: 'RIN', state: false, value: '' },
    {
      name: 'certificateIssueDate',
      title: 'Certificate Issue Date',
      state: false,
      value: '',
    },
    { name: 'clientName', title: 'Client Name', state: true, value: '' },
    { name: 'holderName', title: 'Holder Name', state: true, value: '' },
    { name: 'holderAddress', title: 'Holder Address', state: true, value: '' },
  ];
 

Я визуализирую поле ввода, используя этот код

 <div className="search_inner_container">
                        {searchParams.map(
                          (item) =>
                            item.state amp;amp; (
                              <Form.Item key={item.name} name={item.name}>
                                <Row className="search-row" align="middle">
                                  <Col span={7} style={{}}>
                                    {item.title}:{' '}
                                  </Col>
                                  <Col span={17}>
                                    <Input
                                      style={{
                                        background: '#FFFFFF',
                                        borderBottom: '1px solid grey',
                                      }}
                                    />
                                  </Col>
                                </Row>
                              </Form.Item>
                            ),
                        )}
                      </div>
 

Поля ввода отображаются только тогда, когда состояние равно true. Что мне нужно сделать, так это создать событие onChange для отслеживания изменений в поле ввода. Есть идеи, как это сделать?

Я не понимаю, чего вы хотите, но если вам нужно добавить значение ввода в массив object, вам нужно сделать так, но лучше сделать массив object в useContext или useState крючках.

 <div className="search_inner_container">
  {searchParams.map(
    (item, index) =>
      item.state amp;amp; (
       <Form.Item key={item.name} name={item.name}>
        <Row className="search-row" align="middle">
          <Col span={7} style={{}}>
             {item.title}:{' '}
          </Col>
          <Col span={17}>
            <Input
              style={{
               background: '#FFFFFF',
               borderBottom: '1px solid grey',
              }}
             onChange={(e)=>{searchParams[index].value = e.target.value }}
           />
         </Col>
      </Row>
   </Form.Item>
    ),
    )}
</div>