Question

（jsx代码，将“数据库”视为数组/ obj）

<input onChange={e => e.target.value} type='text'/>
<div> {database.filter(data => data.includes( ??? )} </div>

我想访问???所在的onChange函数的返回值。一种常见的方法是在state属性中创建另一个变量（如果在React组件中），将onChange的值保存在该变量中，然后在data.includes中访问该变量。但是，这将创建一个新的，不必要的变量，该变量仅重复我函数的返回值。

state = {
  inputValue = ''
}
<input onChange={e => {inputValue = e.target.value}} type='text'/>
<div> {database.filter(data => data.includes(inputValue)} </div>

还有另一种方法可以将我的onChange函数的结果直接传递给data.includes吗？

Answer 1

因此在您的组件中，您需要为输入更改保留一个状态，然后需要将每个更改的状态设置为状态变量。

状态更新后，反应将触发重新渲染。

最初状态变量为null，因此一旦在输入字段中键入内容，就只需要检查数据库变量即可。

注意：数据库变量是来自props还是state。

希望您能理解，如果您遇到其他任何问题，请告诉我。

import React , {Component} from 'react'

class App extends Component{

  state ={
   inputCurrentValue: null
  }

   onHandleChange = e => this.setState({
     inputCurrentValue: e.target.value
   })

  render(){
    return(
      <div>
       <input onChange={this.onHandleChange} type='text'/>
       <div>
       {
       this.state.inputCurrentValue ?
        database.filter(data => data.includes(this.state.inputCurrentValue)
        :
        null
       }     
       </div>
      </div>
    )
  }
}

Answer 2

你不能。

您需要立即值，但是该函数在被调用之前不会返回值。除非用户做了一些事情来触发更改事件，否则它不会被调用。这比“立即”要晚很多。

我仍然需要在state属性中创建一个我实际上不需要的变量，因为它只是我的onHandleChange函数的return语句

您确实确实需要。

更改事件处理程序应将选择存储在状态中。更改状态将触发重新渲染。这将使用新数据更新视图。

传递函数返回而无需声明其他变量

2 个答案: