Как динамически изменить значение ввода?

Question

У меня есть динамические входы, которые я могу добавлять и удалять строки с входами, есть входы Material-Ui для Timepicker, у которых при входе с ее значком часов, когда я нажимаю на него, появятся часы. но значения этого входа не могут изменяться с часами.

Мой код:

import { TimePicker } from "material-ui-time-picker";
import {
  Input as Time,
  Dialog as Clock,
  DialogActions,
  Button as ButtonOk
} from "@material-ui/core";
  constructor(props) {
    super(props);
    this.state = {
      isOpenS: false,
      isOpenE: false,
      start: moment().format("HH:MM"),
      end: moment().format("HH:MM"),
      tranches: [
        { start: moment().format("HH:MM"), end: moment().format("HH:MM") }
      ]
    };

    this.ajouterTranche = this.ajouterTranche.bind(this);
    this.supprimerTranche = this.supprimerTranche.bind(this);
    this.handleKeyboardStartChange = this.handleKeyboardStartChange.bind(this);
  }


  openDialogS = () => this.setState({ isOpenS: true });
  closeDialogS = () => this.setState({ isOpenS: false });
  backdropClickS = () => this.setState({ isOpenS: false });
  handleDialogStartChange = (i, newValue) => {
    const hours = newValue
      .getHours()
      .toString()
      .padStart(2, "0");
    const minutes = newValue
      .getMinutes()
      .toString()
      .padStart(2, "0");
    const textValue = hours + ":" + minutes;
    // this.setState({ start: textValue });
    this.state.tranches[i] = Object.assign({}, this.state.tranches[i], {
      start: textValue
    });
    this.setState({
      tranches: this.state.tranches
    });
  };

  handleKeyboardStartChange = (i, event) => {
    const rowDataCopy = this.state.tranches.slice(0);
    rowDataCopy[i] = Object.assign({}, rowDataCopy[i], {
      start: event.target.value
    });
    this.setState({
      tranches: rowDataCopy
    });
  };
  createDateFromTextValue = (i, value) => {
    const splitParts = value.split(":");
    return new Date(1970, 1, 1, splitParts[0], splitParts[1]);
  };

  openDialogE = () => this.setState({ isOpenE: true });
  closeDialogE = () => this.setState({ isOpenE: false });
  handleDialogEndChange = newValue => {
    const hours = newValue
      .getHours()
      .toString()
      .padStart(2, "0");
    const minutes = newValue
      .getMinutes()
      .toString()
      .padStart(2, "0");
    const textValue = hours + ":" + minutes;
    this.setState({ end: textValue });
  };
  handleKeyboardEndChange = (i, event) => {
    // On va copier le tableau de tranches
    const rowDataCopy = this.state.tranches.slice(0);
    // On va jouter cette valeur changée au tableau de tranches
    rowDataCopy[i] = Object.assign({}, rowDataCopy[i], {
      end: event.target.value
    });
    this.setState({
      tranches: rowDataCopy
    });
  };
  createDateFromTextValue = value => {
    const splitParts = value.split(":");
    return new Date(1970, 1, 1, splitParts[0], splitParts[1]);
  };


  ajouterTranche = () => {
    this.setState(prevState => ({
      tranches: [...prevState.tranches, ""]
    }));
  };

  supprimerTranche = idx => () => {
    const rowDataCopy = this.state.tranches.slice(0);
    rowDataCopy.splice(1, 1);
    this.setState({
      tranches: rowDataCopy
    });
  };
render() {

    console.log(this.state.start);
    return (

      <div>
        {this.state.tranches.map((el, i) => (
          <Row key={i}>
            <Col span={12} />
            <Col span={12}>
              <Row>
                <Col span={8}>
                  &nbsp; &nbsp; &nbsp;
                  <label className="pt-label .modifier">
                    <strong>Heure de début</strong>
                  </label>
                  <br />
                  <Time
                    value={el.start}
                    onChange={time => this.handleKeyboardStartChange(i, time)}
                    style={heure}
                    disableUnderline={true}
                    inputComponent={TextMaskCustom}
                    endAdornment={
                      <InputAdornment position="end" style={{ opacity: "0.4" }}>
                        <IconButton onClick={this.openDialogS}>
                          <AccessTime />
                        </IconButton>
                      </InputAdornment>
                    }
                  />
                  <Clock
                    maxWidth="xs"
                    open={this.state.isOpenS}
                    onBackdropClick={this.closeDialogS}
                  >
                    <TimePicker
                      mode="24h"
                      value={this.createDateFromTextValue(this.state.start)}
                      onChange={time => this.handleDialogStartChange(i, time)}
                    />
                    <DialogActions>
                      <ButtonOk onClick={this.closeDialogS} color="primary">
                        Ok
                      </ButtonOk>
                    </DialogActions>
                  </Clock>
                  <br />
                </Col>
                <Col span={8}>
                  &nbsp; &nbsp; &nbsp;
                  <label className="pt-label .modifier">
                    <strong>Heure de fin</strong>
                  </label>
                  <br />
                  <Time
                    value={el.end}
                    onChange={time => this.handleKeyboardEndChange(i, time)}
                    style={heure}
                    disableUnderline={true}
                    inputComponent={TextMaskCustom}
                    endAdornment={
                      <InputAdornment position="end" style={{ opacity: "0.4" }}>
                        <IconButton onClick={this.openDialogS}>
                          <AccessTime />
                        </IconButton>
                      </InputAdornment>
                    }
                  />
                  <Clock
                    maxWidth="xs"
                    open={this.state.isOpenE}
                    onBackdropClick={this.closeDialogE}
                  >
                    <TimePicker
                      mode="24h"
                      value={this.createDateFromTextValue(this.state.end)}
                      onChange={this.handleDialogEndChange}
                    />
                    <DialogActions>
                      <ButtonOk onClick={this.closeDialogE} color="primary">
                        Ok
                      </ButtonOk>
                    </DialogActions>
                  </Clock>
                  <br />
                </Col>
                <Col span={8}>
                  {i === 0 ? (
                    <>
                      <br />
                      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                      &nbsp;
                      <Icon
                        type="plus-circle"
                        theme="twoTone"
                        twoToneColor="#52c41a"
                        onClick={this.ajouterTranche}
                      />
                      <br />
                    </>
                  ) : (
                    <>
                      <Icon
                        type="close-circle"
                        theme="twoTone"
                        twoToneColor="red"
                        onClick={this.supprimerTranche(i)}
                      />
                      <Icon
                        type="plus-circle"
                        theme="twoTone"
                        twoToneColor="#52c41a"
                        onClick={this.ajouterTranche}
                      />
                      <br />
                    </>
                  )}
                </Col>
              </Row>
            </Col>
          </Row>
        ))}
      </div>


    );
  }
}

Мой код песочницы: https://codesandbox.io/s/182oy5995l

Когда я помещаю значение на вход и нажимаю на часы, я получаю значение момента часов, а не значение, которое я помещаю на вход. Я хочу, чтобы при смене времени с часов менялся вход и наоборот.

Как я могу это исправить?

Answer 1

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

Вот моя раздвоенная версия
https://codesandbox.io/s/2xm39130kn

Когда вы вызываете handleDialogStartChange с несколькими объектами, вы не можете просто изменить одно состояние. Если они все не должны делить одно и то же время. Это кажется бессмысленным.

Я изменил вашу функцию TimePicker onChange на onChange={time => this.handleDialogStartChange(i, time)}, чтобы вы также могли увеличивать индекс, чтобы вы знали, с каким вы хотите работать.

Я изменил вашу функцию значения указателя времени на value={this.createDateFromTextValue(el.start)}, чтобы вы ссылались на отдельный элемент, а не на исходную переменную состояния.

Затем в andleDialogStartChange измените состояние траншей, где вы храните эти времена, используя этот индекс. Вы получите предупреждение не изменять подобное состояние, но если вы используете его вместе с setState, this.setState({ tranches: this.state.tranches });, это допустимая операция.

handleDialogStartChange = (i, newValue) => {
    const hours = newValue
      .getHours()
      .toString()
      .padStart(2, "0");
    const minutes = newValue
      .getMinutes()
      .toString()
      .padStart(2, "0");
    const textValue = hours + ":" + minutes;
    this.state.tranches[i].start = textValue;
    this.state.tranches[i].end = textValue;
    this.setState({ tranches: this.state.tranches });
    this.setState({ start: textValue });
  };

Answer 2

Для разрешения Я получаю часы и выбрал час, но он не изменился внесите небольшое изменение value = {el.start} в value = {this.state.start} .