Javascript 自有时间选择器不采用默认值

我创建了两个输入。在一分钟里，我选择小时，在第二分钟。单击编辑时，输入中应显示小时和分钟，转换为每小时和分钟600秒。要编辑的时间应显示在注入中。我不想改变任何事情。给你节省。时间保持不变

代码如下：

图片：

类EditForm扩展了React.Component{ render（）{ 返回( 小时： this.props.handleHours（e）}值={this.props.displayH}/> 会议记录： this.props.handleMinutes（e）}值={this.props.displayM}/> 拯救 取消 ) } } 类Todo扩展组件{ 状态={ i编辑：错， displayH:“”， displayM:“”， 小时：''， 会议记录：“”， 秒数：“” } 显示小时数=（项目）=>{ 设d=编号（项目）； 让小时数=数学楼层（d/3600）； 返程时间； } 显示分钟=（项目）=>{ 设d=编号（项目）； 分钟数=数学楼层（d%3600/60）； 返回分钟数； } 设置编辑=（）=>{ 这是我的国家({ isEditing:！this.state.isEditing }) } handleHours=（小时）=>{ 这是我的国家({ displayH:this.displayHours（小时）， 小时数：小时数*60*60 }) console.log（'changed'，小时）； } handleMinutes=（分钟）=>{ 这是我的国家({ displayM:this.displayments（分钟）， 分钟：分钟*60 }) console.log（'changed'，分钟）； } onSave=（）=>{ const{description}=this.state； this.props.update（this.props.index，{seconds}）； 这是我的国家({ i编辑：错误 }) } onCancel=（）=>{ 这是我的国家({ i编辑：错， }); } componentDidMount=（）=>{ const{todo}=this.props； 这是我的国家({ 秒：待办事项。秒 }) } render（）{ 返回( {this.state.isEditing ? () : (

{this.state.displayH}{this.state.displayM} 此.setEditing（）}>Edit

) } ) } } 您错过了。在设置状态或拉入道具时，您需要在类组件的开头使用它。应用程序中有它，但Todo中缺少它。例如，TODO如下所示：

class Todo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isEditing: false,
      displayH: '',
      displayM: '',
      hours: '',
      minutes: '',
      seconds: ''
    };
  }

  //...the rest of your code
}

对于没有任何状态变量的组件，您可以通过将其转换为功能组件来简化它们：

const CustomInput = props => (
  <div className="wrapper">
    <i onClick={props.onClick} aria-hidden="true" className="fa fa-calendar"></i>
    <input onClick={props.onClick} className="dateInput" value={props.value} type="text" />
  </div>
);

我不得不返工很多部件，但我让它工作起来了。代码如下：

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

class EditForm extends Component {
  constructor(props) {
    super(props);
    console.log(props);

    this.state = {
      hours: props.displayH,
      minutes: props.displayM,
    };
  }

  handleHours = ({ target: { value: hours }}) => {
    this.setState({
      hours,
    });
  }

  handleMinutes = ({ target: { value: minutes }}) => {
    this.setState({
      minutes,
    })
    console.log('changed', minutes);
  }

  render() {
    const { hours, minutes } = this.state;
    return (
      <div className="asd">
        Hours:
        <input type="number" value={hours} onChange={this.handleHours} />
        Minutes: 
          <input type="number"  value={minutes} onChange={this.handleMinutes} />
        <button onClick={() => this.props.onSave(hours, minutes)} type="submit">Save</button>
        <button onClick={this.props.onCancel} type="submit">Cancel</button>
      </div>
    )
  }
}

class Todo extends Component {
  constructor(props) {
    super(props);
    console.log(props);

    const { seconds } = props.todo;

    const displayH = Math.floor(Number(seconds) / 3600) ?
      Math.floor(Number(seconds) / 3600) :
      '';

    const displayM = Math.floor(Number(seconds) % 3600 / 60) ?
      Math.floor(Number(seconds) % 3600 / 60) :
      '';

    this.state = {
      isEditing: false,
      displayH,
      displayM,
    };
  }

  componentDidUpdate(prevProps) {
    const { seconds } = this.props.todo;
    const { seconds: prevSeconds } = prevProps.todo;
    // Typical usage (don't forget to compare props):
    if (seconds !== prevSeconds) {
      const displayH = Math.floor(Number(seconds) / 3600) ?
        Math.floor(Number(seconds) / 3600) :
        '';

      const displayM = Math.floor(Number(seconds) % 3600 / 60) ?
        Math.floor(Number(seconds) % 3600 / 60) :
        '';
      this.setState({
        displayH,
        displayM,
      });
    }
  }

  setEditing = () => {
    this.setState({
      isEditing: !this.state.isEditing
    });
  }

  onSave = (hours, minutes) => {
    console.log('saving', hours, minutes);

    const seconds = (hours * 60 * 60) + (minutes * 60);

    this.props.update(this.props.index, { seconds });

    this.setState({
      isEditing: false
    })
  }

  onCancel = () => {
    this.setState({
      isEditing: false,
    });
  }

  componentDidMount = () => {
    const { todo: { seconds } } = this.props;

    this.setState({
      seconds
    })
  }

  render() {
    const { displayH, displayM } = this.state;
    console.log('rendering Todo');

    return (
      <div>
        {this.state.isEditing

          ? (
            <EditForm
              handleHours={this.handleHours}
              handleMinutes={this.handleMinutes}
              onSave={this.onSave}
              onCancel={this.onCancel}
              displayH = {displayH}
              displayM = {displayM}
            />
          )
          : (
            <li>
              <h1>
                { displayH && `${displayH}h` }
                { displayM && `${displayM}m` }</h1>
              <button onClick={() => this.setEditing()}>Edit</button>
            </li>
          )

        }
      </div>
    )
  }
}

class App extends React.Component {
  constructor() {
    this.state = {
      todos: [
        {
          seconds: 600
        }
      ]
    };
  }

  update = (index, todo) => {
    console.log('updating', todo, index);
    this.setState({
      todos: [
        ...this.state.todos.slice(0, index),
        Object.assign({}, this.state.todos[index], todo),
        ...this.state.todos.slice(index + 1)]
    })
  }

  render() {
    console.log('rendering App');
    return (
      <div>
        <ul>
          {
            this.state.todos
              .map((todo, index) =>
                <Todo
                  key={index}
                  index={index}
                  todo={todo}
                  update={this.update}
                />
              )
          }
        </ul>
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./Hello”导入Hello；
导入“/style.css”；
从“react DatePicker”导入日期选择器；
导入“react datepicker/dist/react datepicker.css”；
类EditForm扩展组件{
建造师（道具）{
超级（道具）；
控制台日志（道具）；
此.state={
时间：道具，
会议记录：props.displayM，
};
}
handleHours=（{target:{value:hours}}）=>{
这是我的国家({
小时，
});
}
handleMinutes=（{target:{value:minutes}}）=>{
这是我的国家({
分钟
})
console.log（'changed'，分钟）；
}
render（）{
const{hours，minutes}=this.state；
返回(
小时：
会议记录：
this.props.onSave（小时、分钟）}type=“提交”>保存
取消
)
}
}
类Todo扩展组件{
建造师（道具）{
超级（道具）；
控制台日志（道具）；
const{seconds}=props.todo；
const displayH=数学楼层（秒数）/3600）？
数学楼层（数字（秒）/3600）：
'';
const displayM=数学楼层（数字（秒）%3600/60）？
数学楼层（数字（秒）%3600/60）：
'';
此.state={
i编辑：错，
显示,，
嗯,，
};
}
componentDidUpdate（prevProps）{
const{seconds}=this.props.todo；
const{seconds:prevSeconds}=prevProps.todo；
//典型用法（别忘了比较道具）：
如果（秒！==秒）{
const displayH=数学楼层（秒数）/3600）？
数学楼层（数字（秒）/3600）：
'';
const displayM=数学楼层（数字（秒）%3600/60）？
数学楼层（数字（秒）%3600/60）：
'';
这是我的国家({
显示,，
嗯,，
});
}
}
设置编辑=（）=>{
这是我的国家({
isEditing:！this.state.isEditing
});
}
onSave=（小时、分钟）=>{
console.log（'保存'、小时、分钟）；
常数秒=（小时*60*60）+（分钟*60）；
this.props.update（this.props.index，{seconds}）；
这是我的国家({
i编辑：错误
})
}
onCancel=（）=>{
这是我的国家({
i编辑：错，
});
}
componentDidMount=（）=>{
const{todo:{seconds}}=this.props；
这是我的国家({
秒
})
}
render（）{
const{displayH，displayM}=this.state；
log（'renderingtodo'）；
返回(
{this.state.isEditing
? (
)
: (

{displayH&`${displayH}h`}
{displayM&`${displayM}m`}
此.setEditing（）}>Edit

)
}
)
}
}
类应用程序扩展了React.Component{
构造函数（）{
此.state={
待办事项：[
{
秒：600
}
]
};
}
更新=（索引，待办事项）=>{
日志（'更新'、todo、索引）；
这是我的国家({
待办事项：[
…this.state.todos.slice（0，索引），
Object.assign（{}，this.state.todos[index]，todo），
…this.state.todos.slice（索引+1）]
})
}
render（）{
console.log（'rendering App'）；
返回(

{
这个是。state。todos
.map（（todo，
  handleMinutes = ({ target: { value: minutes }}) => {
    this.setState({
      displayM:  this.displayMinutes(minutes),
      minutes: minutes * 60
    })
    console.log('changed', minutes);
  }

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

class EditForm extends Component {
  constructor(props) {
    super(props);
    console.log(props);

    this.state = {
      hours: props.displayH,
      minutes: props.displayM,
    };
  }

  handleHours = ({ target: { value: hours }}) => {
    this.setState({
      hours,
    });
  }

  handleMinutes = ({ target: { value: minutes }}) => {
    this.setState({
      minutes,
    })
    console.log('changed', minutes);
  }

  render() {
    const { hours, minutes } = this.state;
    return (
      <div className="asd">
        Hours:
        <input type="number" value={hours} onChange={this.handleHours} />
        Minutes: 
          <input type="number"  value={minutes} onChange={this.handleMinutes} />
        <button onClick={() => this.props.onSave(hours, minutes)} type="submit">Save</button>
        <button onClick={this.props.onCancel} type="submit">Cancel</button>
      </div>
    )
  }
}

class Todo extends Component {
  constructor(props) {
    super(props);
    console.log(props);

    const { seconds } = props.todo;

    const displayH = Math.floor(Number(seconds) / 3600) ?
      Math.floor(Number(seconds) / 3600) :
      '';

    const displayM = Math.floor(Number(seconds) % 3600 / 60) ?
      Math.floor(Number(seconds) % 3600 / 60) :
      '';

    this.state = {
      isEditing: false,
      displayH,
      displayM,
    };
  }

  componentDidUpdate(prevProps) {
    const { seconds } = this.props.todo;
    const { seconds: prevSeconds } = prevProps.todo;
    // Typical usage (don't forget to compare props):
    if (seconds !== prevSeconds) {
      const displayH = Math.floor(Number(seconds) / 3600) ?
        Math.floor(Number(seconds) / 3600) :
        '';

      const displayM = Math.floor(Number(seconds) % 3600 / 60) ?
        Math.floor(Number(seconds) % 3600 / 60) :
        '';
      this.setState({
        displayH,
        displayM,
      });
    }
  }

  setEditing = () => {
    this.setState({
      isEditing: !this.state.isEditing
    });
  }

  onSave = (hours, minutes) => {
    console.log('saving', hours, minutes);

    const seconds = (hours * 60 * 60) + (minutes * 60);

    this.props.update(this.props.index, { seconds });

    this.setState({
      isEditing: false
    })
  }

  onCancel = () => {
    this.setState({
      isEditing: false,
    });
  }

  componentDidMount = () => {
    const { todo: { seconds } } = this.props;

    this.setState({
      seconds
    })
  }

  render() {
    const { displayH, displayM } = this.state;
    console.log('rendering Todo');

    return (
      <div>
        {this.state.isEditing

          ? (
            <EditForm
              handleHours={this.handleHours}
              handleMinutes={this.handleMinutes}
              onSave={this.onSave}
              onCancel={this.onCancel}
              displayH = {displayH}
              displayM = {displayM}
            />
          )
          : (
            <li>
              <h1>
                { displayH && `${displayH}h` }
                { displayM && `${displayM}m` }</h1>
              <button onClick={() => this.setEditing()}>Edit</button>
            </li>
          )

        }
      </div>
    )
  }
}

class App extends React.Component {
  constructor() {
    this.state = {
      todos: [
        {
          seconds: 600
        }
      ]
    };
  }

  update = (index, todo) => {
    console.log('updating', todo, index);
    this.setState({
      todos: [
        ...this.state.todos.slice(0, index),
        Object.assign({}, this.state.todos[index], todo),
        ...this.state.todos.slice(index + 1)]
    })
  }

  render() {
    console.log('rendering App');
    return (
      <div>
        <ul>
          {
            this.state.todos
              .map((todo, index) =>
                <Todo
                  key={index}
                  index={index}
                  todo={todo}
                  update={this.update}
                />
              )
          }
        </ul>
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));