Question

这是广泛应用的一部分，所以我将发布相关部分。我正在尝试从我的App.js实现e.target.value onChange直到应用程序的index.js文件。应用程序加载但会中断输入字段中插入值的时刻，我指的是mapDispatchToProps函数：

App.js
import React, { Component } from 'react';
import Navbar from './components/Navbar';
import ToggleLayout from './components/ToggleLayout';
import { connect } from 'react-redux';


class App extends Component {

  render() {
    return (

       <div>
          <Navbar
            searchTerm={this.props.searchItunes.searchTerm}
            onSearchChange={(e) =>this.props.onSearchChange(e.target.value)}
          /> 

          <ToggleLayout
            switchLayout={()=> this.props.switchLayout()}
            grid={this.props.toggle.grid}
          />
      </div>

    );
  }
}

const mapStateToProps = (state) => {
  return {
    toggle: state.booleanReducer,
    searchItunes: state.searchItunesReducer
  };
};

const mapDispatchToProps = (dispatch) => {
  return { 
    switchLayout: () => {
      dispatch({
        type:"GRID"
      });
    },
    onSearchChange: (e) => {
      dispatch({
        type:"SEARCHTERM",
        payload:e.target.value
      });
    }
  };
};


export default connect(mapStateToProps,mapDispatchToProps)(App);

，索引文件如下：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import  { Provider }  from 'react-redux';
import { createStore, combineReducers, applyMiddleware } from 'redux';


const booleanReducer = (state = { grid:true, additionalPages:false }, action) => {
  if (action.type === "GRID"){
    return state = {
      ...state,
      grid:!state.grid
    }
  }
  return state;
};

const searchItunesReducer = (state = { searchTerm:'', itunes:null }, action) => {
  if (action.type === 'SEARCHTERM'){
    return state = {
      ...state,
      searchTerm:action.payload
      }
    }
  }


const store = createStore(combineReducers({booleanReducer,searchItunesReducer}));
console.log(store.getState());

store.subscribe(() =>{
  console.log("store updated!", store.getState());
});


registerServiceWorker();
ReactDOM.render(
<Provider store={store}>
  <App />
  </Provider>
, document.getElementById('root'));

开关布局功能按预期工作，所以你能告诉我我在onSearchChange函数上做错了吗？

Answer 1

在您的Navbar组件中，您将onSearchChange道具作为匿名函数传递this.props.onSearchChange e.target.value - 所以您通过了确切的传递mapDispatchToProps中的回调定义onSearchChange作为接受更改事件的函数时回调的值。这就是您更改搜索输入值时出现错误的原因。

此处有2个选项，您只需将活动传递到onSearchChange组件中的Navbar：

<Navbar searchTerm={this.props.searchItunes.searchTerm} onSearchChange={this.props.onSearchChange} />

或更改onSearchChange签名，使其仅接受最终值：

onSearchChange: (value) => { dispatch({ type: "SEARCHTERM", payload: value }); }

Answer 2

<Navbar
  searchTerm={this.props.searchItunes.searchTerm}
  onSearchChange={(e) =>this.props.onSearchChange(e.target.value)}
/>

在方法调用中，您发送的是事件的值，即搜索字词，因此在mapDispatchToProps中您不需要再次发送整个事件，您只需要发送字符串即可在onSearchChange中进行设置，因为在reducer中，您要将完整操作有效负载设置为searchTerm reducer属性。

const mapDispatchToProps = (dispatch) => {
  return { 
    switchLayout: () => {
      dispatch({
        type:"GRID"
      });
    },
    onSearchChange: (term) => {
      dispatch({
        type:"SEARCHTERM",
        payload: term,
      });
    }
  };
};

如何使用Redux / React更改e.target.value的状态？

2 个答案: