React JS：检查输入值中的逗号

Question

我有一个带有嵌套对象数组的状态对象，称为“axisLabels”。

如果用户要在输入中输入任何内容，我想检查输入的 event.target.value 中是否有逗号（逗号分隔）以更新数组中的第二个对象。

这怎么可能？

我当前的功能代码更新了两者。

状态对象：

selectedTemplateData: {

   axisLabels: ['Option 1', 'Option 2']

}

更新数组的函数：

axisChange(event) {

    event.persist();

    this.setState(prevState => ({

        selectedTemplateData: {

            ...prevState.selectedTemplateData,

            Axislables: [event.target.value, event.target.value]

        }

    }))

}

用法：

<input type="text"  onChange={(event) => this.axisChange(event)} />

Answer 1

这肯定会奏效：axisChange(event) {&nbsp; &nbsp; event.persist();&nbsp; &nbsp; this.setState(prevState => ({&nbsp; &nbsp; &nbsp; &nbsp; selectedTemplateData: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...prevState.selectedTemplateData,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Axislables: [...event.target.value.split(',')]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }))}如果没有逗号，则将保留该值。如果有逗号，您可以拆分这些值并将它们分散到新数组中。

Answer 2

在这里您会找到其他示例，但一个简单的方法如下：axisChange(event) {&nbsp; &nbsp; event.persist();&nbsp; &nbsp; const e = event && event.target && event.target.value;&nbsp; &nbsp; const values = e && e.split(',').length > 1&nbsp; &nbsp; &nbsp; ? e.split(',')&nbsp; &nbsp; &nbsp; : e;&nbsp; &nbsp; this.setState(prevState => ({&nbsp; &nbsp; &nbsp; &nbsp; selectedTemplateData: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...prevState.selectedTemplateData,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Axislables: [ values[0], values[1], values[n] ]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }))}