Проблема с обновлением полей с несколькими ключами и токенами для шаблонов - PullRequest
Новая
       55

Проблема с обновлением полей с несколькими ключами и токенами для шаблонов

0 голосов
/ 08 апреля 2020

Вариант использования: Add Template кнопка создает шаблон div . В шаблоне div есть кнопка для создания нескольких ключей и токенов. Функция добавления шаблона работает нормально, и проблема с кнопкой add key.

Инициализация состояния: 

 this.state = {
      addTemplates: [
        {
          templateID: "",
          addKeyValues: [{ key: "", tokenName: "" }],  
        }
      ]     
    };

* Добавить шаблон, добавление ключа и функции значения *

addNewTemplate = () => {    
      this.setState((prevState) => ({
        addTemplates: [
          ...prevState.addTemplates,
          { templateID: "", addKeyValues: [{ key: "", tokenName: "" }] },
        ],
      }));
  };
 addKeyValue = () => {
    this.setState((prevState) => ({
      addTemplates: [
        {
          addKeyValues: [
            ...prevState.addTemplates.addKeyValues,
            { key: "", tokenName: "" },
          ],
        },
      ],
    }));
  };

JSX-код 

<label>Add Template </label> 
<span onClick={this.addNewTemplate} >
    <FaPlus value="Add" className="inactive" />
</span>

{this.state.addTemplates.map((el, i) => (
  <Row key={i}>
    <Col>
      <label> Template ID  </label> 
        <input type="text" name="templateId" value={el.templateId} /> 
    </Col>

    <Col>
      <label> Add Key   </label> 
        <span onClick={this.addKeyValue} >
          <FaPlus value="Add"   />
        </span>    
    </Col>

    <Col md={2}  >
      <label> Remove </label>
      <p id={i} onClick={() => this.removeAddKeyValues(i)}>
        <FaTrash value="remove" />
      </p>
    </Col> 

    // ADD KEY code starts
      <Row>
        <Col md={5}>
          <label  >  Key  </label>        
            <input type="text" name="key" value={el.addKeyValues.key} /> 
        </Col>
        <Col md={5}>
          <label> Value   </label> 
            <input  list="value_list"  name="tokenName"   value={el.addKeyValues.tokenName} />  
        </Col>
        <Col md={2}  >
          <label >   Remove   </label>
          <p id={i} onClick={() => this.removeAddKeyValues(i)}>
            <FaTrash value="remove" />
          </p>
        </Col>
      </Row>     
  </Row>
))}

Проблема: Поля ключа и токена не добавляются к их указанным c шаблонам.

[* Моя работа с этим кодом: *: https://codesandbox.io/s/confident-bassi-mze2u

...