React 如何在子组件上使用表单

在以下实例中我们将为大家演示如何在子组件上使用表单。 onChange 方法将触发 state 的更新并将更新的值传递到子组件的输入框的 value 上来重新渲染界面。

你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上。

import React, { Component } from 'react';

// 子组件
class Content extends React.Component{
    render(){
        return 

            {/* 渲染最新 value 值   触发事件时，获取父组件传过来的数据 */}
            
            {/* 获取父组件传入的最新的value值 */}
            
{this.props.myDataProp}
        
    }
}

// 父组件
class From extends Component {
    constructor(props){
        super(props);
        // 设置初始值
        this.state={value:'你好'}
        // 绑定this
        this.handleChange = this.handleChange.bind(this)
    }
    // 监听事件
    handleChange(event){
        // 获取最新的value值 并改变原值
        this.setState({value:event.target.value});
    }

   render(){
        // 将最新的value值 赋值给value
       let value = this.state.value;
       return(
           

               {/* 在父组件中渲染子组件 同时渲染最新的value值 */}
                
           
       )
   }
}
export default From  ;