React 重新渲染表单导致 focus/blur 状态更改问题

Question

我在 React 组件中有一个表单，它有两个更改处理程序，一个用于我的两个 draftjs 文本区域，一个用于我的其他文本输入：

onChangeEditor = (editorStateKey) => (editorState) => {
    this.setState({ [editorStateKey]: editorState });
}

handleInputChange(event) {
    event.preventDefault();
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
        [name]: value
    });
}

在我的渲染方法中，我有两个视图，我可以根据我所处的视图模式、阅读模式或编辑模式在它们之间切换：

render () {

    const Editable = () => (
        <div className="editor">
            <form className="editor-inner">
                <h3>Redigerar: Anbudsbrev</h3>
                <h4>Rubrik</h4>
                <input type="text" key="text01" name="title" defaultValue={this.state.title} onBlur={this.handleInputChange} />
                <h4>Text 1</h4>
                <RichEditor editorState={this.state.editorState1} onChange={this.onChangeEditor('editorState1')} name="text01"/>
                <h4>Citat</h4>
                <input type="text" key="text02" name="quote01" defaultValue={this.state.quote01} onBlur={this.handleInputChange} />
                <h4>Text 2</h4>
                <RichEditor editorState={this.state.editorState2} onChange={this.onChangeEditor('editorState2')} name="text02" />
                <EditorFooter {...this.props} submitForm={this.saveForm} />
            </form>
        </div>
    );

    const Readable = () => (
        <div>
            <h1 className="header66">{this.state.title}</h1>
            <div className="text66">{this.state.text01}</div>
            <div className="quote100">{this.state.quote01}</div>
            <div className="text66">{this.state.text02}</div>
        </div>
    );

    return (
        <div>
            { this.props.isInEditMode ? <Editable /> : <Readable /> }
        </div>
    );
}

当我在浏览器中切换输入时，我必须单击两次才能将焦点放在正确的输入上。

我怀疑这是因为在每个输入的 "blur" 事件上触发了更改，导致表单因状态更改而重新呈现。当表单重新呈现时，它会通过 { this.props.isInEditMode ? <Editable /> : <Readable /> } 导致输入失去焦点。

问题是我不知道如何解决这个问题。

Answer 1

我自己解决了。

事实证明，像我一样将 Editable 和 Readable 放在我的组件中并不是一个好主意。相反，我将它们移到了它们自己的组件中，现在它可以正常工作了。

class Editable extends React.Component {
    render() {
        return (
            <div className="editor">
                <form className="editor-inner">
                    <h3>Redigerar: Anbudsbrev</h3>
                    <h4>Rubrik</h4>
                    <input type="text" name="title" defaultValue={this.props.title} onChange={this.props.handleInputChange} />
                    <h4>Text 1</h4>
                    <RichEditor editorState={this.props.editorState1} onChange={this.props.onChangeEditor('editorState1')} name="text01" />
                    <h4>Citat</h4>
                    <input type="text" name="quote01" defaultValue={this.props.quote01} onChange={this.props.handleInputChange} />
                    <h4>Text 2</h4>
                    <RichEditor editorState={this.props.editorState2} onChange={this.props.onChangeEditor('editorState2')} name="text02" />
                    <EditorFooter {...this.props} submitForm={this.props.saveForm} />
                </form>
            </div>
        );
    }
};

class Readable extends React.Component {
    render() {
        return (
            <div>
                <h1 className="header66">{this.props.title}</h1>
                <div className="text66">{this.props.text01}</div>
                <div className="quote100">{this.props.quote01}</div>
                <div className="text66">{this.props.text02}</div>
            </div>
        );
    }
};

React 重新渲染表单导致 focus/blur 状态更改问题

react rerendering form causes focus/blur issue on state change

forms

focus

blur

reactjs