Question

我有handleClick事件，通过单击renderDetail函数必须在{this.state.ShowInfo[i]} div中运行。我按以下代码进行操作：

class App extends React.Component {
constructor(props) {
super(props)
this.state = {
  data: [],
  ShowInfo: {},
  text: {}

 }
}
render() {
const { data } = this.state
const renderInfo = data.map((item, i) => {
  return (
    <div class="item">
      <div onClick={e => this.handleClick(e, item, i)}>
        <span>Click</span>
      </div>
      <div>{this.state.ShowInfo[i]}</div>
</div>
  )
})
return <div>{renderInfo}</div>
}

handleClick = (e, element, i) => {
  fetch('/json.bc', {
  method: 'POST',
  },)
.then(response => response.text())
.then(text => {
 let Maindata = JSON.parse(text.replace(/\'/g, '"'))
 this.setState(prevState => ({
 ShowInfo: { ...prevState.ShowInfo,[i]: this.renderDetail(Maindata, i)},
}))
}).catch(error => console.error(error))
}

renderDetail(element, i) {
 let lenfamilies = element.families.length
 let indents = []
let index = 0
for (let j = 0; j < lenfamilies; j++) {
  let numF = i
  let numS = j
  let stingF = numF.toString()
  let stingS = numS.toString()
  index = stingF + stingS
  indents.push(
  <div>
    <span
        key={index}
        onClick={e => this.handleText(e, element.families[j], index)}
      >
        Click
      </span>
      <span key={index}>
        {this.state.text[index]}
      </span>
</div>
  )
}
 return(
       indents
       )
  }
  handleText = (e, element, index) => {
        this.setState(prevState => ({
        text: { ...prevState.text, [index]: "test" }////In this part   'test' should be set in  span but it is not been set
  }))
 }
 }
 ReactDOM.render(<App />, document.getElementById("Result"))

您有其他方法可以在renderDetail事件中调用handleClick函数吗？

Answer 1

您可以使用回调

class App extends React.Component {
    constructor(props) {
    super(props)
    this.state = {
      data: [],
      ShowInfo: {},

     }
    }
    render() {
    const { data } = this.state
    const renderInfo = data.map((item, i) => {
      return (
        <div class="item">
          <div onClick={e => this.handleClick(e, item, i)}>
            <span>Click</span>
          </div>
          <div>{this.state.ShowInfo[i]}</div>
        </div>
      )
    })
    return <div>{renderInfo}</div>
    }

    handleClick = (e, element, i) => {
      fetch('/json.bc', {
      method: 'POST',
      },)
    .then(response => response.text())
    .then(text => {
     let Maindata = JSON.parse(text.replace(/\'/g, '"'))
     this.setState(prevState => ({
     ShowInfo: { ...prevState.ShowInfo,[i]: (Maindata,i)=>{
     let element = Maindata
     let lenfamilies = element.families.length
     let indents = []
    let index = 0
    for (let j = 0; j < lenfamilies; j++) {
      let numF = i
      let numS = j
      let stingF = numF.toString()
      let stingS = numS.toString()
      index = stingF + stingS
      indents.push(
        <div>
          <span
            key={index}>    
          </span>
        </div>
      )
    }
     return(
           indents
           )
      }
    }},
    }))
    }).catch(error => console.error(error))
    }
     ReactDOM.render(<App />, document.getElementById("Result"))

如何在ReacJs中的onClick事件上调用函数

1 个答案: