Question

我在输入完成后尝试读取文本区域的输入。我在某处读到了你需要onBlur事件处理程序来实现这个功能而不是onChange。但是当我使用onBlur时，我无法输入我的输入。我哪里错了？

import React from 'react'
import ReactDOM from 'react-dom'
class HelloWorld extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            value: '',
        }
    }
    handleChange(event) {
        this.setState({value: event.target.value})
        console.log(this.state.value)
    }     
    render(){
        return(
            <div>
                <h1>Hello World Restaurant</h1>
                <textarea placeholder="Enter name of guest:" onBlur={this.handleChange.bind(this)} value={this.state.value}></textarea>
            </div>
        )
    }
}
ReactDOM.render(<HelloWorld/>,document.getElementById('root'))

Answer 1

您正在混合controlled component和uncontrolled component的概念。

如果您使用value属性，则需要使用onChange方法更新state值，否则它将变为只读（您正在按状态控制textarea的值，所以如果state不会更新你在textarea中键入的内容，将通过状态值重置。）

如果您不想使用onChange方法然后删除textarea的值属性，则可以在onBlur内输入event.target.value来获取值{{ 1}}。

检查此示例（不受控制的组件）：

class HelloWorld extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            value: '',
        }
    }
    
    handleChange(event) {
        this.setState({value: event.target.value})
    }  
    
    render(){
        return(
            <div>
                <h1>Hello World Restaurant</h1>
                value: {this.state.value}
                <br/>
                <textarea placeholder="Enter name of guest:" onBlur={this.handleChange.bind(this)}></textarea>
            </div>
        )
    }
}

ReactDOM.render(<HelloWorld/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Answer 2

添加到Mayank的答案，

我建议你使用受控输入，因为git可以让你更灵活地在以后使用这些值

你可以这样做

class HelloWorld extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            value: '',
        }
    }
    handleBlur() {
        console.log('You finished typing:', this.state.value)
    }
    handleChange(event) {
        this.setState({value: event.target.value})
    }  
    
    render(){
        return(
            <div>
                <h1>Hello World Restaurant</h1>
                value: {this.state.value}
                <br/>
                <textarea placeholder="Enter name of guest:" onChange={this.handleChange.bind(this)} value={this.state.value} onBlur={this.handleBlur.bind(this)}></textarea>
            </div>
        )
    }
}

ReactDOM.render(<HelloWorld/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

如何从文本区域读取我的输入？

2 个答案: