如何使用 rails 后端在 react-redux 中获取表单提交值？

Question

我有一个 Rails 后端，其中包含成分列表。我正在尝试使用搜索栏（表单）输入成分 ID 以查找合适的成分。当我单击表单的提交按钮时，我想要调度函数 getIngredient，以 ID 作为参数，但是使用我尝试过的方法，我没有得到应该是 ID 的东西；它是未定义的，或者只是 "an event"。我只是简单地看到了错误消息，所以我没有更多的细节。它只是刷新状态，清除错误消息。

我试过使用 onSubmit={() => getIngredient(id)} 形式的值，然后 returns 作为事件对象。 onSubmit={() => this.props.getIngredient(id)} 它 returns 未定义。简单地表述为 onSubmit={getIngredient(id)} 也没有用。

我有console.logged一切，我发现它在getIngredient(id)中命中派发动作时出错，因为id未定义。

我使用的 getIngredients 方法有效，但在尝试仅获取一种成分时我遇到了麻烦。我已经阅读了我能找到的关于 redux、react-redux 的所有内容，甚至重新选择以尝试针对该问题，但我已经碰壁了。

IngredientForm.js分量：

        <form onSubmit={(id) => getIngredient(id)}>
          <label value="Find Ingredient">
            <input type="text" placeholder="Search By Id" />
          </label>
          <input type="submit" value="Find Ingredient" />
        </form>

const mapDispatchToProps = { getIngredient }

const mapStateToProps = (state, props) => {
  const id = props.id;
  return {
    ingredients: state.ingredients.filter(ingredient => ingredient.id === id)
  };
};

在 actions.js 中调度操作创建者：

export function getIngredient(id) {
  return dispatch => {
        console.log("trying to get id to show up =>", id)
    dispatch(getIngredientRequest(id));
    return fetch(`v1/ingredients`)
      .catch(error => console.log(error))
      .then(response => response.json())
      .then(json => dispatch(getIngredientSuccess(json)))
      .catch(error => console.log(error));
  }
}

操作：

export function getIngredientRequest(id) {
  return { type: GET_INGREDIENT_REQUEST, id };
}

reducer.js

function rootReducer(state = initialState, action) {
  console.log(action.type);
  switch (action.type) {
    case "GET_INGREDIENTS_SUCCESS":
      return { ...state, ingredients: action.json.ingredients }
    case "GET_INGREDIENTS_REQUEST":
      console.log('Ingredients request received')
      return
    case "HIDE_INGREDIENTS":
      console.log('Ingredients are being hidden')
      return { ...state, ingredients: [] }
    case "GET_INGREDIENT_REQUEST":
      console.log('One Ingredient request received:', "id:", action.id)
      return
    case "GET_INGREDIENT_SUCCESS":
    console.log('GET_INGREDIENT_SUCCESS')
      return {
                ...state,
                ingredients: action.json.ingredients.filter(i => i.id)
            }
    default:
      return state
  }
}

服务器端window输出：

Processing by StaticController#index as HTML
  Parameters: {"page"=>"ingredients"}
  Rendering static/index.html.erb within layouts/application
  Rendered static/index.html.erb within layouts/application (0.9ms)
Completed 200 OK in 9ms (Views: 7.9ms | ActiveRecord: 0.0ms)```

Answer 1

那是因为在 React Synthetic Events 中 - 就像 onSubmit - 回调中的第一个参数始终是 Event 对象。我建议您使用受控输入。这意味着您将 id 值保留在组件的状态中并将该值分配给输入。每当用户键入新 ID 时，您都会更新状态并将新值分配给输入。

class Form extends React.Component {
 state = {
  id: ""
 };

 handleInputChange = event => {
  this.setState({ id: event.target.value });
 };

 render() {
  return (
   <form
    onSubmit={(event) => {
     event.preventDefault();
     getIngredient(this.state.id);
    }}
   >
    <label value="Find Ingredient">
     <input
      type="text"
      placeholder="Search By Id"
      onChange={this.handleInputChange}
      value={this.state.id}
     />
    </label>
    <input type="submit" value="Find Ingredient" />
   </form>
  );
 }
}

如何使用 rails 后端在 react-redux 中获取表单提交值？

How to get Form submit value in react-redux with rails backend?

javascript

forms

action

dispatch

react-redux