制御された入力を持つステートレスのリアクトコンポーネント

Question

現在、制御された入力をステートレスなリアクタのコンポーネントで動作させるステートレスのコンポーネントをSateのフルコンポーネントの中にラッピングしています。例えば

、私が知りたいのですがどのような

const InputComponent = (props) => { 
    return (
    <input value={props.name} onChange={props.handleChange} /> 
); 
} 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     name: 'Tekeste' 
    }; 
    this.handleChange = this.handleChange.bind(this); 
    } 
    handleChange(event) { 
    this.setState({ 
     name: event.target.value 
    }); 
    } 
    render() { 
    return (
     <InputComponent name={this.state.name} handleChange={this.handleChange} /> 
    ); 
    } 
} 

は物事のカップルです。

1. これは良いパターンですか？
2. ステートレスコンポーネント内で入力を制御するという目標を達成するにはどうすればいいですか？

Answer 1

はその値とそれを親から変更するためのコールバックを受け取るので、状態のない制御された入力です。それは完全に良好なパターンだ、あなたもこのようなES7 class propertiesを使用して、それがさらに簡単に作ることができます。

class App extends React.Component { 
    state = { 
    name: 'Tekeste' 
    }; 

    handleChange = (event) => { 
    this.setState({ 
     name: event.target.value 
    }); 
    } 

    render() { 
    return (
     <InputComponent name={this.state.name} handleChange={this.handleChange} /> 
    ); 
    } 
} 

あなたがcreate-react-appを使用している場合、それはすでにサポートされていますすぐに。

また、より一般的に使用されているように、制御入力の小道具の名前をvalueとonChangeに変更できます。

Answer 2

@のfrontsideairの答えのオフ建物、あなたがhttps://github.com/NullVoxPopuli/react-state-helpers

import React, { Component } from 'react'; 
import stateWrapper from 'react-state-helpers'; 

class App extends Component { 
    render() { 
    const { 
     mut, 
     values: { name } 
    } = this.props; 

    return <InputComponent name={name} handleChange={mut('name')} />; 
    } 
} 

export default stateWrapper(App)