He began to study React and came across a problem in his small project. (Or rather, their 2).

  1. After clicking on the search button (with the entered value), it (the entered value) is displayed in the second input and vice versa.

  2. I didn’t figure out how to send a request after clicking on a button

    import React from "react"; import ReactDOM from "react-dom"; import Reflux from "reflux"; import Header from "./Components/header.jsx"; import Footer from "./Components/footer.jsx"; import Map from "./Components/map.jsx"; import MyStore from "./Store/mystore.jsx"; import Actions from "./Actions/action.jsx" export class LondonTransport extends Reflux.Component{ constructor(props){ super(props); this.store = MyStore; } shouldComponentUpdate(){ console.log("state Update"); return true; } componentDidMount(){ if (Actions.getType() == 'bus'){ console.log('bus'); } else { console.log('Stop Point'); } } render(){ return( <div> <Header /> <div className ="content" > <div className = "map"> </div> <div className = "map-info"> </div> <div className="clear" ></div> </div> <Footer emailAdress = "sdfsfs" /> </div> ) } } ReactDOM.render(<LondonTransport />, document.getElementsByClassName('wrapper')[0]);

    Component Search

     import Reflux from "reflux"; import React from "react"; import Actions from "../Actions/action.jsx"; import MyStore from "../Store/mystore.jsx"; export default class Search extends Reflux.Component{ constructor(){ super(); this.state = { inputData : "" } this.store = MyStore; } getInputData(e){ this.setState({inputData : e.target.value}) } handleSubmit(e){ if (this.state.inputData){ Actions.addInputData(this.state.inputData, this.props.type); this.setState({inputData : ""}); Actions.showStore(); } else { alert('Error input value!!!'); } } render(){ return( <form id="form_search_bus" > <input type="search" placeholder ={this.props.placeholder} onChange = {this.getInputData.bind(this)} value = {this.state.inputData} /> <button type="button" onClick = {this.handleSubmit.bind(this)}> <i className = "fa fa-search"></i> </button> </form> ) } }

    Header component

     import React from "react"; import Search from "./search.jsx"; export default function Header(){ return( <header> <img src="./img/logo.png" alt="Logo" /> <Search type ="bus" placeholder ="Введите номер автобуса" /> <Search type ="stop-point" placeholder ="Введиет название остановки" /> <Help /> </header> ) }

    Store

     import Reflux from "reflux"; import Actions from "../Actions/action.jsx"; export default class MyStore extends Reflux.Store{ constructor(){ super(); this.state = { inputData : "", type : "" } this.listenTo(Actions.addInputData, this.onAddValue); this.listenTo(Actions.showStore, this.showDataFromStore); this.listenTo(Actions.getType, this.getType); this.listenTo(Actions.getInputValue, this.getInputValue); } onAddValue( inputValue, typeValue ){ this.setState({inputData : inputValue}); this.setState({type : typeValue}); } showDataFromStore(){ console.log(this.state); } getType(){ return this.state.type; } getInputValue(){ return this.state.inputData; } }

    index.html

     <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css" /> <title>London Transport Api</title> </head> <body> <div class="wrapper"> </div> <script src="js/index.js" defer ></script> </body> </html>
  • You in handleSubmit this line ( Actions.addInputData(this.state.inputData, this.props.type); ) change the state, I correctly understood the code? - Raz Galstyan
  • Yes, and here I am, where I did not see any ajax request - Raz Galstyan
  • Yes, you understood correctly, changing the status of the Store. Ajax-request is not inserted - Alex
  • Can I detail a little what should be after the click? ajax returns some content and where do you want to embed this content? - Raz Galstyan
  • If I understood correctly, should it (ajax request) be written to componentDidMount ()? - Alex

0