反應：使組件外部

Question

我一直在嘗試進入React，因此閱讀官方指南，但是，我不知道如何將組件放入自己的文件以跨文件重用它們。

我做了一個非常基本的React組件，它包含一個input標籤和一些配置。我想使這個輸入標籤在它自己的文件中是一個獨立的組件。我如何實現這一目標？

我用的WebPack與此配置：

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    'webpack-dev-server/client?http://localhost:3000', 
    'webpack/hot/only-dev-server', 
    './src/index' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin() 
    ], 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     loaders: ['react-hot', 'babel'], 
     include: path.join(__dirname, 'src') 
    }] 
    } 
}; 

這是陣營代碼：

import React, { Component } from 'react'; 

export default React.createClass({ 
    getInitialState: function() { 
    return {text: ''}; 
    }, 
    handleChange: function(e) { 
    this.setState({text: e.target.value}) 
    }, 
    render() { 
    return (
     <div> 
     <h1>What's your name?</h1> 
     <input 
      type="text" 
      value={this.state.text} 
      onChange={this.handleChange} 
     /> 
     <h2>Hallo, {this.state.text}</h2> 
     </div> 
    ); 
    } 
}); 

編輯：我忘了index.js：

import React from 'react'; 
import { render } from 'react-dom'; 
import App from './Components/App'; 

render(<App />, document.getElementById('root')); 

感謝。

Answer 1

您將需要創建一個輸入組件，並將您的狀態和處理更改函數作爲道具給組件。

輸入組件：

import React, {Component} from 'react'; 

var Input = React.createClass({ 
    handleChange: function(e) { 
    this.props.handleChange(e.target.value); 
    } 

    render() { 
    return (
     <input 
     type="text" 
     value={this.props.text} 
     onChange={this.handleChange} /> 
    ) 
    } 
}); 
export default Input; 

您當前的組件（添加輸入組件）：

import React, { Component } from 'react'; 
import Input from './path_to_inputComponent'; 

export default React.createClass({ 
    getInitialState: function() { 
    return {text: ''}; 
    }, 
    handleChange: function(text) { 
    this.setState({text: text}) 
    }, 
    render() { 
    return (
     <div> 
     <h1>What's your name?</h1> 
     <Input text={this.state.text} handleChange={this.handleChange} /> 
     <h2>Hallo, {this.state.text}</h2> 
     </div> 
    ); 
    } 
}); 

那麼會發生什麼事是，this.state.text將作爲文本道具輸入傳遞哪些將設置輸入的值。這將允許輸入組件在多個地方使用，並在每個地方使用不同的value。此外，當從輸入中觸發onChange事件時，它將調用傳遞給它的函數handleChange作爲道具。因此，它將調用父組件中的函數，並且將在父組件中更新狀態。