Question

如何使用两个可重用组件和第三个“控制器”组件创建一个页面，该组件将提供与前两个组件的双向通信。组件1＆amp; 2将是简单的文本框，将显示它们旁边的文本值字符计数。组件3将是一个只读文本框，它将显示1和2的计数总和。

以下是相同的代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script src="app.jsx"></script>
    <meta charset="utf-8" />
</head>
<body>
<div id="container">
</div>
<div id="container2">
</div>
    <input type="text" id="Final" name="finaltextbox"/>
<script type="text/babel">
        var max_chars = 0;
        var App = 
                    React.createClass({
                                        render: function() {
                                                            return (
                                                                    <div> <TwitterInput /> </div>
                                                                   );
                                                            }
                                     });

        var TwitterInput = 
             React.createClass({
                    getInitialState: 
                          function() {
                                                return {
                                                chars_left: max_chars
                                                };
                                                },
                                                handleChange(event) {
                                                var input = event.target.value;
                                                this.setState({
                                                chars_left: input.length 
                                                });
                                                },
                                                render: function() {
                                                return (
                                                <div>
                                                    <textarea onChange={this.handleChange.bind(this)}></textarea>
                                                    <p> {this.state.chars_left}</p>
                                                </div>
                                                );
                                         }
                             });

        ReactDOM.render(
        <App />,
        document.getElementById('container')
        );
        ReactDOM.render(
        <App />,
        document.getElementById('container2')
        );

    </script>
</body>
</html>

react.js中的可重用组件

0 个答案: