反應選擇onChange空事件

Question

我有以下React組件，該組件使用一個select標記，該標記由該組件管理：

<main id='homescreen-container'>
                {/* TODO: Add maxLength after deciding on a font size */}
                <textarea readOnly id="recorded-text-view" value={this.state.displayedContent}></textarea>
                <button className="button" onClick={this.toggleRecording}>{!this.state.recording ? "Înregistrează" : "Stop"}</button>
                <h5>Paragraful curent</h5>
                    <select id="current-paragraph" value={this.state.workingPage.WorkingParagraphIndex} onChange={(event) => this.changeCurrentParagraph(event)}>
                        {this.state.workingPage.Paragraph.map((val, index) => (
                            <option key={index} value={index + 1}>{index + 1}</option>
                        ))}
                    </select>
                <button className="button" onClick={this.createNewParagraph}>Adaugă un paragraf</button>
                <button className="button" onClick={this.deleteCurrentParagraph}>Șterge paragraful curent</button>
                <button className="button" onClick={this.saveFile}>Salvează</button>
            </main>

我的問題是，當我嘗試處理onChange事件時，傳遞給處理程序的事件的target屬性為null 。 這是我的處理程序：

changeCurrentParagraph = (event: any) => {
        console.log(event);
        this.setState((prev: HomescreenState) => ({
            workingPage: prev.workingPage.changeWorkingParagraph(event.target.value)
        }))
    }

這不起作用，並TypeError: Cannot read property 'value' of null以下錯誤： TypeError: Cannot read property 'value' of null 。 知道可能是什么問題嗎？ 提前致謝！

Answer 1

您嘗試在setState中設置值的方式可能引起了您的問題。 嘗試更改代碼以遵循以下模式：

changeCurrentParagraph = (event: any) => {
        console.log(event);
        const myVal = this.state.workingPage.changeWorkingParagraph(event.target.value) //assuming you are returning a value from this
        this.setState((prev: HomescreenState) => ({
            workingPage: myVal
        }))
    }