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

这是一个广泛应用程序的一部分，所以我将只发布相关部分。我正在尝试实现从App.js到应用程序的index.js文件的e.target.value onChange。应用程序加载但在输入字段中插入值时中断，我指的是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);

App.js
从“React”导入React，{Component}；
从“./components/Navbar”导入Navbar；
从“./components/ToggleLayout”导入ToggleLayout；
从'react redux'导入{connect}；
类应用程序扩展组件{
render（）{
返回(
this.props.onSearchChange（e.target.value）}
/> 
this.props.switchLayout（）}
grid={this.props.toggle.grid}
/>
);
}
}
常量mapStateToProps=（状态）=>{
返回{
切换：state.booleanReducer，
searchItunes:state.searchItunesReducer
};
};
const mapDispatchToProps=（调度）=>{
返回{
开关布局：（）=>{
派遣({
类型：“网格”
});
},
onSearchChange：（e）=>{
派遣({
键入：“SEARCHTERM”，
有效载荷：e.目标值
});
}
};
};
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）；

索引文件如下所示：

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'));

index.js
从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
从'react redux'导入{Provider}；
从'redux'导入{createStore，combinereducer，applyMiddleware}；
const booleanReducer=（state={grid:true，additionalPages:false}，action）=>{
如果（action.type==“GRID”）{
返回状态={
……国家，
网格：！state.grid
}
}
返回状态；
};
const searchItunesReducer=（状态={searchTerm:''，itunes:null}，操作）=>{
if（action.type==='SEARCHTERM'）{
返回状态={
……国家，
搜索词：action.payload
}
}
}
const store=createStore（组合减速机（{booleanReducer，searchItunesReducer}））；
log（store.getState（））；
store.subscribe（（）=>{
log（“store updated！”，store.getState（））；
});
registerServiceWorker（）；
ReactDOM.render(
，document.getElementById（'root'）；

---

开关布局功能按预期工作，那么你能告诉我onSearchChange函数有什么问题吗？

在你的

Navbar

组件中，你正在传递

onSearchChange

prop作为一个匿名函数，它调用

this.props.onSearchChange

和

e.target.value

，因此你在回调过程中向回调传递准确的值在

mapDispatchToProps

中，您将

onSearchChange

定义为接受更改事件的函数。这就是更改搜索输入值时出错的原因

这里有两个选项，或者只将事件传递给

Navbar

组件中的

onSearchChange

：

或者更改

onSearchChange

签名，使其仅接受最终值：

onSearchChange：（值）=>{
派遣({
键入：“SEARCHTERM”，
有效载荷：值
});
}

在

Navbar

组件中，您正在将

onSearchChange

prop作为匿名函数传递，该匿名函数使用

e.target.value

调用

this.props.onSearchChange

-因此，在定义

mapDispatchToProps

中的回调时，您正在将准确的值传递给回调

onSearchChange

作为接受更改事件的函数。这就是更改搜索输入值时出错的原因

这里有两个选项，或者只将事件传递给

Navbar

组件中的

onSearchChange

：

或者更改

onSearchChange

签名，使其仅接受最终值：

onSearchChange：（值）=>{
派遣({
键入：“SEARCHTERM”，
有效载荷：值
});
}

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

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