I use axios for ajax request, the application itself on react and redux, I need the page not to reload when querying. When you get the request, everything is OK, but when post is, everything is re-rendered.

const Main = connect(mapStateToProps, mapDispatchToProps)( class extends React.Component { componentDidMount() { getEmployeesList() } constructor(props){ super(props) this.state = {flag: false} } getForm() { this.setState({flag: true}); const { createEmployee } = this.props.appAction; let request = employee; createEmployee(request); } closeForm() { this.setState({flag: false}); console.log('flag: ', this.state.flag) } render() { let st = this.props.employees console.log("It is props: ", st); let add = ''; (this.state.flag == true)?(add = <EmployeesCreator closeForm={this.closeForm.bind(this)}/>):(add = ''); return <div> <button onClick={this.getForm.bind(this)}>Add</button> <EmployeesList employees={st}/> {add} </div> } }); function mapStateToProps(state) { return { employees: state.employees, //newEmployee: state.newEmployee, } } function mapDispatchToProps(dispatch) { return { appAction: bindActionCreators(appAction, dispatch) } } /***********************************************************/ export function createEmployee(employee){ var url = 'http://localhost:3000/newEmployee'; var request = employee; return (dispatch) => { dispatch({ type: AJAX_REQUEST, newEmployee: {} }) axios.post(url, request) .then(result => { dispatch({ type: AJAX_SUCCESS, newEmployee: { result: result.data, } }) }) .catch(error => { dispatch({ type: AJAX_ERROR, newEmployee: {}, errors: error }) }) } } /****************************************************************************/ export function reducer(state, action) { switch(action.type) { case GET_EMPLOYEES_LIST: return {...state, employees: action.employees}; case AJAX_SUCCESS: return {...state, newEmployee: action.newEmployee.result}; default: return state; } }

    1 answer 1

    1. Handle form submission, not click
    2. Do event.preventDefault() in the handler

     class App extends React.Component { render() { return ( <form onSubmit={this.onSubmit}> <input type="text" ref={inp => this.inp = inp} /> {" "} <input type="submit" value="Send" /> </form> ) } onSubmit = event => { event.preventDefault() // Без этого страница перезагрузится console.log(this.inp.value) } } ReactDOM.render(<App />, document.querySelector('main')) 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <main></main>

    • I did it, but I still have to restart after the post - Nikita21
    • @ Nikita21, then did something wrong ... - Qwertiy ♦
    • onSubmit = event => {event.preventDefault (); axios.post (' localhost: 3000 / newEmployee ', this.inp.value)} render () {return <form onSubmit = {this.onSubmit}> <input type = "text" ref = {inp => this.inp = inp} /> <input type = "submit" value = "Add" /> </ form>} - Nikita21