Question

我想让列表中的每个元素单独点击。我有一个div数组，我将很快循环到一个数组中，但为了简单起见，我只是将它们硬编码到它中（一旦我弄明白，我将添加更多元素）。当我点击列表项div时，我希望它将该项转换为文本：＆＃34;点击＆＃34;。

我希望将这些文件分开，因为这个应用程序会变大，我计划添加更多内容。

App.js

POST addresses/_search
{
  "query" : {
    "term" : {
      "street_number" : {
        "value": 112
      }
    }
  }
}

Comp.js

这里的问题是，当我点击列表项时，event.target.textContent正在将{props.list [0]}和{props.list [1]}输入到事件对象中并将两个元素都转换为c和l分别是..字符串数组中的第一个和第二个元素＆＃34;单击＆＃34;。

奇怪的是，当我第二次点击c或l时，它们按照我的要求行动并分别转为点击。所以问题是，如果没有最初的打嗝，我怎样才能做到这一点？如果您需要设置信息，请与我们联系。

import React, { Component } from 'react';
import './App.css';
import Comp from './Comp';

class App extends Component {

  state = {
    list: [
      "gameplay", 
      "visuals"
    ]

  }

  changetext = event =>{
    this.setState({list: event.target.textContent = "clicked"});
  }

  render() {
    return (
      <div>
        <Comp list = {this.state.list}
        changetext = {this.changetext}/> 
      </div>
    );
  }
}

export default App;

Answer 1

您有几个语法错误。如果要将文本更改为“单击”，可以这样做：

const Comp = props => {
  let listarr = [];
  listarr.push(<div key={0} onClick={props.changetext}>{props.list[0]}</div>);
  listarr.push(<div key={1} onClick={props.changetext}>{props.list[1]}</div>);
  return (
    <div>{listarr}</div>
  );
}

class App extends Component {

  state = {
    list: [
      "gameplay",
      "visuals"
    ]

  }

  changetext = event => {
    const { textContent } = event.target;
    // Always use the callback syntax for setState when you need to refer to the previous state
    this.setState(prevState => ({
      list: prevState.list.map(el => textContent === el ? "clicked" : el)
    }));
  }

  render() {
    return (
      <div>
        <Comp list={this.state.list}
          changetext={this.changetext} />
      </div>
    );
  }
}

Answer 2

只需将您要传递的方法更改为：

this.changetext.bind(this)

所以看起来像这样：

  <div>
    <Comp list = {this.state.list}
    changetext = {this.changetext.bind(this)}/> 
  </div>

或者您的其他选择可能是在构造函数中执行此操作：

constructor() {
  super();
  this.changetext.bind(this);
}

...

render() {
  <div>
    <Comp list = {this.state.list}
    changetext = {this.changetext}/> 
  </div>
}

如何在反应中阻止我的列表的这个奇怪的输出

2 个答案: