Реакция передачи реквизита от детей к родительской проблеме - PullRequest
Новая
       7

Реакция передачи реквизита от детей к родительской проблеме

0 голосов
/ 18 января 2019

Я новичок в React. Когда я пытаюсь передать реквизиты от детей к родителю, все приложение обновляется, а состояние восстанавливается до первоначального. Есть ли проблема в моем коде? Понятия не имею, как это решить.

(ps: следующее предложение только для количества слов. Пожалуйста, не вижу его. Почему я должен добавить больше деталей. Если у меня есть способность знать каждую деталь, я уже решил это сам))

Родитель: 

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stops: [],
      legs: [],
      driver: null,

      finishedSign: false,
      stopsSign: false,
      legsSign: false,
      driverSign: false
    };
  }

  componentDidMount() {
    console.log("-DID");
    this.getStops();
    this.getLegs();
    this.getDriver();
  }

  // garentee all of data have received
  checkFinished() {
    const { stopsSign, legsSign, driverSign } = this.state;
    const mark = stopsSign && legsSign && driverSign;
    if (mark)
      this.setState({
        finishedSign: mark
      });
  }

  // GET/STOPS API
  getStops() {
    fetch("/api/stops")
      .then(res => res.json())
      .then(stops => {
        this.setState({ stops: stops, stopsSign: true }, () =>
          console.log("stops fetched !", stops)
        );
        this.checkFinished();
      });
  }

  // GET/LEGS API
  getLegs() {
    fetch("/api/legs")
      .then(res => res.json())
      .then(legs => {
        this.setState({ legs: legs, legsSign: true }, () =>
          console.log("driver fetched !", legs)
        );
        this.checkFinished();
      });
  }

  // GET/Driver API
  getDriver() {
    console.log("-DRIVER");
    fetch("/api/driver")
      .then(res => {
        return res.json();
      })
      .then(driver => {
        this.setState(
          {
            driver: driver,
            driverSign: true
          },
          () => console.log("driver fetched !", driver)
        );
        this.checkFinished();
      });
  }

// passing func
  updateDriver(driver) {
    console.log("update app!");
    alert(driver);
  }

  renderMaps() {
    return (
      <Maps
        stops={this.state.stops}
        legs={this.state.legs}
        driver={this.state.driver}
      />
    );
  }

  renderDriverController() {
    return (
      <DiverController
        legs={this.state.legs}
        driver={this.state.driver}
        update={this.updateDriver}
      />
    );
  }

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-3 col-md-3">
            {this.state.finishedSign && this.renderDriverController()}
          </div>
          <div className="col-sm-8 col-md-8">
            {
              //this.state.finishedSign && this.renderMaps()
            }
          </div>
        </div>
      </div>
    );
  }
}

export default App;

дети: 

class DriverController extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: this.props.legs,
      driver: this.props.driver
    };
  }

  handleUpdate = e => {
    const driver = null;
    driver.activeLegID = this.refs.selectedLeg.value;
    driver.legProgress = this.refs.selectedProgress.value;
    if (driver.legProgress >= 0 && driver.legProgress <= 100)
      this.props.update("test");
    else alert("out of range!");
  };

  render() {
    const { items, driver } = this.state;
    console.log("items:", items);
    return (
      <form>
        <hr />
        <label>Driver Location:</label>
        <div className="form-group">
          <select
            id="inputState"
            className="form-control"
            defaultValue={driver.activeLegID}
            ref="selectedLeg"
          >
            {items.map(item => (
              <option key={item.legID}>{item.legID}</option>
            ))}
          </select>
          <div className="input-group input-group-sm mb-3">
            <div className="input-group-prepend">
              <span className="input-group-text" id="inputGroup-sizing-sm">
                Percentage:
              </span>
            </div>
            <input
              type="number"
              className="form-control"
              defaultValue={driver.legProgress}
              ref="selectedProgress"
            />
          </div>
          <button onClick={this.handleUpdate} className="btn btn-primary">
            Submit
          </button>
          <hr />
        </div>
      </form>
    );
  }
}

export default DriverController;

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Вы не должны передавать реквизиты от ребенка его родителю. Это анти-шаблон.

Вы можете передать функцию от родителя к потомку, которая будет запущена в дочерний и, следовательно, обновляет требуемое состояние в родительском.

Обновить вопрос:

Я думаю, потому что ребенок завернут в форму.

Добавить e.preventDefault () для функции handleSubmit, чтобы предотвратить обновление 

handleUpdate = e => {
   e.preventDefault()
0 голосов
/ 18 января 2019

Попробуйте использовать onClick={() => this.handleUpdate}

...