Question

我有一个简单的搜索栏，它有一个onChange方法来搜索/过滤数据。

class ItemSearch extends React.Component {

constructor(){
  super();
  this.handleOnChange = this.handleOnChange.bind(this);
}

handleOnChange(e){
  const searchTerm = this.search.value;
  console.log(searchTerm);
  this.props.fetchSearch(searchTerm);
}

render() {
  return (
    <div>
      <form>
        <input type='text' ref={(input) => {this.search = input}} onChange={this.handleOnChange}></input>
      </form>
      <div>
        {this.props.data.map((item, i) => {
          return <ListItem
            key={i}
            item={item}
          />
        })}
      </div>
    </div>
  )
}
}

注销搜索字词会给我正确的值。但是，在将其传递给redux动作创建器后，它将变为未定义。我的行动很简单，就像这样。

export default function fetchSearch(value){
  console.log(value);
  return {
    type: 'FETCH_SEARCH',
    payload: value
  }
}

在此日志中，它已变为未定义。我认为它有一些东西可以使它超出范围，但没有将参数传递给动作创建者，无论如何也无法从状态向表单提升状态。我已经在许多教程和帖子中看到了这个确切的东西，所以我有点不知所措，虽然这可能是我想念的傻事。

感谢。

Answer 1

我忘了更新容器中的mapDipatchToProps。一旦我这样做，它工作正常。谢谢大家！

Answer 2

是的，你在这里犯了一个错误。首先，你必须使用redux表单来完成这件事。在那里你必须将它与减速器或商店连接如下。

import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import { createTimer } from '../actions/index';

class TimerNew extends Component {

onSubmit(props){
  this.props.createTimer(props);
}

  render() {
  const { fields: { hours, minutes, seconds, label }, handleSubmit } = this.props;
  return (
    <form onSubmit={handleSubmit(this.props.createTimer)}>
      <h5>Create A New Timer</h5>
      <div className={`form-group ${hours.touched && hours.invalid ? 'has-danger' : ''}`}>
        <label>Hours</label>
        <input type="text" className="form-control" {...hours} />
        <div className="text-help">
          {hours.touched ? hours.error : ''}
        </div>
      </div>
      <div className={`form-group ${minutes.touched && minutes.invalid ? 'has-danger' : ''}`}>
        <label>Minutes</label>
        <input type="text" className="form-control" {...minutes} />
        <div className="text-help">
          {minutes.touched ? minutes.error : ''}
        </div>
      </div>
      <div className={`form-group ${seconds.touched && seconds.invalid ? 'has-danger' : ''}`}>
        <label>Seconds</label>
        <input type="text" className="form-control" {...seconds} />
        <div className="text-help">
          {seconds.touched ? seconds.error : ''}
        </div>
      </div>
      <div className={`form-group ${label.touched && label.invalid ? 'has-danger' : ''}`}>
        <label>Label</label>
        <input type="text" className="form-control" {...label} />
        <div className="text-help">
          {label.touched ? label.error : ''}
        </div>
      </div>
      <button type="submit" className="btn btn-primary">Submit</button>
    </form>
  );
  }
}

function validate(values) {
  const errors = {};

  if (!values.hours) {
    errors.title = 'Enter hours';
  }
  if (!values.minutes) {
    errors.categories = 'Enter minutes';
  }
  if (!values.seconds) {
    errors.content = 'Enter seconds';
  }
  if (!values.label) {
    errors.content = 'Enter label';
  }
  return errors;
}

// connect: first argument is mapStateToProps, 2nd is mapDispatchToProps
// reduxForm: 1st is form config, 2nd is mapStateToProps, 3rd is mapDispatchToProps
export default reduxForm({
  form: 'TimerNewForm',
  fields: ['hours', 'minutes', 'seconds', 'label'],
  validate
}, null, { createTimer })(TimerNew);

在这里你必须通过调用reduxForm帮助器来包装你的表单，并在我的情况下传递动作创建器 createTimer。还要注意代码可能因redux-forms而异你正在使用的版本。我在这里使用4.3。*。您可以查看redux-forms文档here以获取更多详细信息。希望这可以帮助。快乐的编码。

传递给操作后，React / Redux参数变为未定义

2 个答案: