Question

我有一些表格的受控组件文字输入：

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

我还想在单独的组件中渲染（上面）文本输入 - 但是！如果我可以使用COMPLETED文本输入来呈现它（在我看来），那将会是更好的感觉。

如何实施？我想我可以onBlur 被触发的处理程序。
有没有办法将render（）延迟到完整的文本输入之后？

丹科

Answer 1

如果您想延迟渲染，则需要在渲染中根据标志返回null。假设您有一个状态变量inputBlurred，您可以将其作为道具传递给其他人。

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>
        )
    }
}

Answer 2

你有几个可能性。

围绕Input组件创建自定义input包装，它会触发＆＃34;更改＆＃34;活动在＆＃34;完成＆＃34;改变 - 例如在模糊。在您输入内容时，父组件不会收到增量onChange事件。
从父级传递，将onBlur处理程序传递给子级input组件，并在触发onBlur处理程序时尽快在任意位置呈现输入值。< / p>

有没有办法只在完成输入后才能渲染？延迟render（） - ReactJS

2 个答案: