React Redux - 调度检索输入值 [英] React Redux - Dispatch retrieve input value

问题描述

我有以下 React 视图/渲染函数:

let BaseSalaryView = ({ counter, onChange }) =>(<div><输入类型=文本"占位符=年薪"值={计数器}onChange={() =>onChange(counter)}/><span>尝试:{counter}</span>

)

我想弄清楚如何将刚刚更改的值传递到我的 onChange 调度处理程序中.

尝试

我尝试了以下但它们都未定义.

onChange={() =>onChange(this.input.value)}>onChange={() =>onChange(input.value)}>onChange={() =>onChange(value)}>

其余代码

const mapDispatchToProps = (dispatch) =>{返回 {onChange:(计数器)=>{dispatch(baseSalaryChange(counter))//这里需要输入值}}}导出函数 baseSalaryChange(baseSalary) {返回 { 类型:BASE_SALARY_CHANGED, baseSalary }}

动作被调用，但 coutner 始终设置为初始值.

解决方案

OMG 经过 2 小时的挣扎，在我发布问题 2 分钟后我弄清楚了.

需要在 onChange 的内联函数中引入一个参数，它会被设置为刚刚发生的 event.然后我可以从那里访问 event.target :

onChange={(event) =>onChange(event.target.value)}/>

I have the following React view/render function:

let BaseSalaryView = ({ counter, onChange }) => (
    <div>
        <input type="text"
            placeholder="Annual Salary"
            value={counter}
            onChange={() => onChange(counter)} />
        <span>Try: {counter}</span>
    </div>
)

I am trying to figure out how I can pass in the value that just got changed, into my onChange dispatch handler.

Attempts

I have tried the following but they are all undefined.

onChange={() => onChange(this.input.value)}> 
onChange={() => onChange(input.value)}> 
onChange={() => onChange(value)}> 

Rest of code

const mapDispatchToProps = (dispatch) => {
    return {
        onChange: (counter) => {
            dispatch(baseSalaryChange(counter)) // Need the input v alue here
        }
    }
}

export function baseSalaryChange(baseSalary) {
  return { type: BASE_SALARY_CHANGED, baseSalary }
}

The actions get called, but coutner is always set to the initial value.

解决方案

OMG after 2 hours of struggling, 2 mins after I posted the question I figure it out.

Need to take in a parameter into the inline function of onChange, which will get set to the event that just happened. Then I can access the event.target from there:

onChange={(event) => onChange(event.target.value)} />

这篇关于React Redux - 调度检索输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！