constructor() {
super();
this.state = {
showPageGroup: [],
current: 0,
showPageNumber: 0, //
currentShowPage: 0, //
selectTaskId: [], // ID
preSelTaskIdQuantity: 0, //
currentClickPage: 0, //
ellipsisNumber: 0, //
showBorderColor: -1,
ellipsisPosition: "behind",
startGetIndex: 0, // -
endGetIndex: 0, // -
arrowShow: true, //
showKey: true, //
useInformationShow: false,
useId: 0,
useType: 1,
userKeyValue: {},
isAdmin: false,
clickedIds: new Set(),
basicInformationData: {},
tags: [],
toDoQuantity: 0,
uploadFileNames: []
}
this.submitTaskId = this.submitTaskId.bind(this);
}
submitTaskId ( taskId="" ) {
const _self = this;
const selectTaskId = _self.state.selectTaskId;
console.log("id = ", selectTaskId);
_self.fetchStateInformation(selectTaskId)
}
<BasicInformation
basicInformationData = { basicInformationData }
submitTaskId = { this.submitTaskId }
getTaskId = { _self.state.selectTaskId }
isAdmin = { _self.state.isAdmin }
/>
I rewrote the original BasicInformation component as follows
App.js
import React from "react";
import BasicInformationContainer from "./containers/BasicInformationContainer"
import "./assets/styles/index.less";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
tags: [], //
videoLength: 0,
videoSize: 0,
distanceCreationTime: 0
};
}
render() {
const _self = this;
const isAdmin = _self.props.isAdmin;
return (
<div className={"basic_information_div"}>
{/*<AddTodo />*/}
{/*<VisibleTodoList />*/}
{/*<Footer />*/}
<BasicInformationContainer
/>
</div>
)
}
componentDidMount =()=> {
const _self = this;
}
}
export default App;
BasicInformationContainer.js
import React from "react";
import { connect } from "react-redux";
import BasicInformation from "../components/index";
import { toggleToChange } from "../../../../../actions";
import { DifferentLabelsFilters } from "../../../../../actions";
const getDifferent = (todos, filter) => {
let return_todos = "";
switch (filter) {
case DifferentLabelsFilters.SHOW_ALL:
return_todos = todos;
console.log("BasicInformationContainer return_to_dos = ", return_todos)
return return_todos;
case DifferentLabelsFilters.SHOW_COMPLETED:
return todos.filter(t => t.completed)
case DifferentLabelsFilters.SHOW_ACTIVE:
return todos.filter(t => !t.completed)
default:
throw new Error("Unknown filter: " + filter)
}
}
const showAdmin = (showAdmin) => {
return showAdmin;
}
const mapStateToProps = state => {
console.log("BasicInformationContainer state = ")
return {
showDifferent: getDifferent(state.showDifferent, state.differentLabelsFilter),
}
}
const mapDispatchToPropsReview = (dispatch) => {
const _self = this;
//console.log("BasicInformationContainer mapDispatchToPropsReview ===", _self.props)
//console.log("******************* dispatch ===", dispatch)
return {
toggleToChangeBasicInformation: id => dispatch(toggleToChange(id)),
toggleToSubmitTaskId: id => _self.props.submitTaskId(id),
}
};
export default connect(
mapStateToProps,
mapDispatchToPropsReview
)(BasicInformation);
because my BasicInformationContainer.js is written in this way, I can"t pass props, and then I don"t know how to pass the submitTaskId method to the BasicInformation component
.