javascript - 有没有办法只在完整输入后才渲染？延迟 render() - ReactJS

Question

我有一些表单的受控组件文本输入:

<input type="text" onChange={(e) => this.props.changeBusiness(e)}/>

我还想在单独的组件中呈现(以上)文本输入 - 但是!如果我可以使用已完成的文本输入来渲染它以提供(在我看来)更好的感觉，那就太好了。

• 如何实现？我假设我可以有一个 onBlur 被触发的处理程序。
• 有什么方法可以延迟 render() 直到完成文本输入后才执行？

蛋壳

Answer 1

是的，如果您想延迟渲染，您只需要根据标志在渲染中返回 null 即可。假设您有一个状态变量 inputBlurred，您将它作为 prop 传递给其他东西。

render() {
    if (!this.props.inputBlurred) return null;
    ... more here
}

你会像这样使用它。

class ParentComponent extends Component {
    constructor() {
        super();
        this.state = {inputBlurred: false}
    }
    handleBlur = (e) => {
        if(e.target.value){
            this.setState({inputBlurred: true});
        }
    }
    render() {
        return(
            <div>
                <input onBlur={this.handleBlur} />
                <ChildComponent inputBlurred={this.state.inputBlurred} />
            </div>
        )
    }
}