Question

我有一个名为Test的组件，可以接收2个道具：CurrentPage和OnPageRequest: (currentPage: number) => void

当父组件使用Test时，它将当前页码设置为其状态。更新后，下面的输入字段将通过OnPageRequest将该值反馈回父组件，如下所示：

OnPageRequest(e.target.value);

其中返回，父组件在状态下更新其当前页码。

测试组件：

const handlePageNumberBlur = (e) => {
    OnPageRequest(e.target.value);
}

render() {
    return (
        <input
            title="Current Page"
            onBlur={handlePageNumberBlur}
            aria-label="Current Page"
            min="1"
            max={TotalPages}
            placeholder="1"
            type="number"
            value={this.props.CurrentPage} />
    )
}

我正在尝试以这样一种方式来编写Test，以便仅在触发onBlur事件时才触发新输入的值。但是我已经了解到，使用上面的代码，它永远不会更新value。只有在发生onChange事件的情况下，它才会这样做：OnPageRequest(e.target.value);

如何仅在onBlur触发时更改它？

示例：https://codesandbox.io/s/kumuc

Answer 1

尝试使用defaultValue代替value。 defaultValue道具仅将值设置为初始渲染时的输入，并且如果道具的值发生更改，则不需要保持更新。

<input
    { ... }
    defaultValue={this.prop.CurrentPage}
/>

但是，如果在渲染输入后设置CurrentPage，这也可能会成为问题，这取决于从何处获得道具的初始值。

如果您需要在第一次渲染后保持输入的更新，则可以使用Refs和componentDidUpdate生命周期方法更新其值。

class TestComponent extends React.Component {
    constructor(props) {
        super(props);
        this.inputRef = React.createRef();
    }

    componentDidUpdate(prevProps) {
        if (this.inputRef.current.value != this.props.CurrentPage) {
            this.inputRef.current.value = this.props.CurrentPage;
        }
    }

    /* ... */

    render() {
        return <input 
            { ... }
            defaultValue={this.props.CurrentPage}
            ref={this.inputRef}
        />
    }
}

禁止onChange并仅将onBlur用于React输入组件

1 个答案: