1234567891011121314151617181920212223242526272829303132333435363738 |
- import React from "react";
- import Input from "./Input";
- import Button from "./Button";
- export default class Form extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- name: "",
- color: this.props.color
- },
- this.onChange = this.onChange.bind(this);
- }
- onChange(event) {
- this.setState({
- name: event.target.value
- });
- }
- render() {
- let bgColor = {
- 'backgroundColor': this.props.color
- };
- return (
- <div style={bgColor}>
- <form>
- <label>
- Name:
- <Input type="text" onChange={this.onChange} value={this.state.name} />
- </label>
- <Button onClick={() => this.props.newName(this.state.name)} text="Hello" />
- <Button onClick={() => this.props.newBackground(this.props.color)} text="CSS" />
- <div>Hello {this.props.name}!</div>
- </form>
- </div>
- );
- }
- }
|