Question

我正在我的React App中创建一个日期选择器字段。

import React, { Component } from 'react'
...

DateInput.propTypes = {
  type: oneOf(['date']),
  placeholder: string.isRequired,
  maxLength: string,
  disabled: bool,
}

export default DateInput

我像其他字段一样尝试过this.change，但这也不起作用。

如何在状态下更新新值？

Answer 1

如果希望DateInput反映其父组件（this.state.age）的状态，则必须以某种方式使DateInput显示此age。

这是通过使用道具来完成的。

由于DateInput是普通输入元素的包装，因此您应该使用value和onChange（而不是change）道具：

render() {
    let {
        ...
        ...
        age,
        ...
     } = this.state
     ...
     ...
     //date of birth
     let stringAge = age.toString()
     stringAge = stringAge.substring(0, 4) + '-' +
     stringAge.substring(4, 6) + '-' +
     stringAge.substring(6, 8)
     ...
         <DateInput
             type="date"
             value={age}
             onChange={this.changeDOB}
             placeholder={stringAge}
             className="datePicker"
          />
}

这就是所谓的“受控”输入。只要有可能，应将React组件设为“纯”的，这纯粹是其props的功能。

还应该将changeDOB处理程序绑定到组件实例，否则this不会是您所期望的，并且this.setState(...)调用将失败。

这可以在构造器中完成（无聊但更好*）：

contructor(props) {
    super(props);
    this.changeDOB = changeDOB.bind(this);
}

或在定义方法时（方便但有警告**）：

changeDOB = () => {
    this.setState({ age: document.getElementByClassNames("datePicker").value })
}

或将处理程序连接到道具时（已损坏***）：

<DateInput
     type="date"
     value={age}
     onChange={() => this.changeDOB()}
     placeholder={stringAge}
     className="datePicker"
 />

在这里，DateInput是一个受控制的组件（由其道具控制，因此受其父控件控制），无论是在显示（年龄）还是行为（onChange）上都是如此。

父组件成为子组件的控制器。这种思维方式在React中无处不在。

（*是最标准，最高效的方法）

（**某些intellisense的IDE不喜欢它）

（***这是一个性能问题，因为它在每次渲染期间都会为prop的值生成新的实例）

反应-输入日期字段未更新状态值

1 个答案: