Соедините внешний компонент (теги React) с формой Redux, чтобы значения передавались как массив значений в полезной нагрузке. - PullRequest
Новая
       27

Соедините внешний компонент (теги React) с формой Redux, чтобы значения передавались как массив значений в полезной нагрузке.

0 голосов
/ 31 марта 2020

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


  state = { 
    tags: [], 
    value: "" 
  };

  handleChange = (e) => {
    this.setState({
      value: e.target.value
    });
  }
  addTag() {
    const { tags, value } = this.state;
    let tag = value.trim();

    tag = tag.replace(/,/g, "");

    if (!tag) {
      return;
    }

    this.setState({
      tags: [...tags, tag],
      value: ""
    });
  }
  editPrevTag() {
    let { tags } = this.state;
    const tag = tags.pop();
    this.setState({ 
      tags, 
      value: tag });
  }
  render() {
    const {input, meta: { touched, error }} = this.props;
    const { tags, value } = this.state;
    return (
      <div className="form">
        <div className="tags">
          <ul>
            {tags.map((tag, i) => (
              <li key={tag + i} className="tag">
                {tag}
              </li>
            ))}
          </ul>
          <input
            {...input}
            type="text"
            placeholder="Enter tags (Hit space to separate tags)"
            value={value}
            onChange={this.handleChange}
            ref="tag"
            style={{width: '60%', marginLeft: '0.1rem', fontSize: '0.8125rem'}}
            onKeyUp={this.handleKeyUp}
            onKeyDown={this.handleKeyDown}
          />
        </div>
      </div>
    );
  }
}

- это компонент поля формы, который вызывает фокус и размытие, но не меняет его, 

<Field
 type="text"
 name="tags"
 component={Tags}
/>

1 Ответ

0 голосов
/ 31 марта 2020

Изменение: 

<Field
 type="text"
 name="tags"
 component={Tags}
/>

К: 

<Field
 type="text"
 name="tags"
 component={<Tags tags={payload}/>}
/>
...