如何将 HTML 标记添加到数组的值中？答案

【问题标题】：How to add an HTML tag to the value of an array?如何将 HTML 标记添加到数组的值中？
【发布时间】：2021-07-31 01:32:49
【问题描述】：

这是我的 HTML 代码。在这里，我渲染数组中的所有元素（在state 中）并为每个元素添加一个类"dragImg"（我需要这个类用于其他用途）。在渲染的数组下，我有一个input 和button；这个想法是用户可以输入一些东西，当他点击button时，输入的文本会被添加到state的数组中。

 <div>
    {this.state.texts.map(text => (
         <div class="dragImg">{text}</div>
     ))}
 </div>
 <input ref={(textInput) => {this.textInput = textInput}} 
 type="text"></input>
 <button onClick={this.clickButton.bind(this)}>Add 
 Text</button>

这里是 clickButton() 函数，输入值被添加到状态：

clickButton(){

        this.setState({
            texts: this.state.texts.concat(this.textInput.value)
          }) 
          
    }

列表的所有元素都正确呈现，问题是只有列表中的预定义元素获得"dragImg" HTML 类标记，而用户稍后添加的元素不再具有它。这对我来说是个问题，因为我希望所有这些文本都是可拖动的，并且只有具有 "dragImg" 类标签的元素是可拖动的，而新的输入则不是。

我能做什么？

【问题讨论】：

为什么需要ref 来访问输入值？为什么不把它保持在一个状态？

标签： javascript html jquery reactjs

【解决方案1】：

在 react js 中使用 ClassName 而不是 class

最佳实践是使用状态来处理输入值。

<input 
    value={ this.state.fieldInput } 
    onchange= { (e) => { this.setState({ fieldInput: event.target.value }); } } 
>

【讨论】：

谢谢，但这并不能解决我的问题。