Question

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

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

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

我怀疑这是因为每个输入的“模糊”事件都会触发更改，导致表单重新呈现，因为状态已更改。当表单重新呈现时，它会通过{ 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>
        );
    }
};

反应重新呈现会导致状态变化的焦点/模糊问题

1 个答案: