Question

我很难用一个组件，我希望你们能帮助我。所以我创建了一个自定义组件，它返回用户在输入中键入的格式化值（如果用户键入'1999-9-9'，它返回'1999-09-09 00:00'），值为分配给父级的状态（handleCustomInputValueChange）。现在..问题是如果我点击'数字'类型并用随机字符填充输入，保存它并转到'datetime'，输入保持不变，它不会重置或它不会从道具中获取数据。它具有“数字”中的旧值。使用componentWillReceiveProps（）方法，在许多情况下将是这个问题的答案，但不是在这里，因为我想要的只是将数据发送到父。我不需要将这些数据发送回我的'CustomInput'。

父组件：

    handleCustomInputValueChange(changeEvent) {
        this.setState({value: changeEvent});
    }
    ...
    switch(type) {
        case 'NUMERIC':
            return <CustomInput data={value} type="numeric" callbackParent={handleCustomInputValueChange} />
            break;
        case 'DATETIME':
            return <CustomInput data={value} type="datetime" callbackParent={handleCustomInputValueChange} />
            break;
    }

子组件

export default class CustomInput extends Component {
    constructor(props) {
        super();

        this.state = {
            value: props.data || ''
        }
    }

    handleChange(event) {
        /* formatting data */
        callbackParent(formattedData);
    }

    render() {
        return <input type="text" onChange={this.handleChange} value={this.state.value} />;
    }
}

那么..切换到另一种类型后有没有办法重置输入？

谢谢！

Answer 1

您没有正确地将状态数据传递给孩子，在将data传递给孩子时，您应该这样做，

<CustomInput data={this.state.value} type="numeric" callbackParent={handleCustomInputValueChange} />

编辑：让你的孩子听取道具的变化，根据这个设置状态值。

或者您可以将您的孩子渲染更改为：

 render() {
  const {data}   = this.props
        return <input type="text" onChange={this.handleChange} value={data?data:''} />;
    }

React - 重置组件输入

1 个答案: