React初级_添加爱好显示列表

效果如图:

代码:

import React from 'react';

class Hobby extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ...this.state,
            hobbies: this.props.hobbies || []
        }
        this.addHobbyCallback = this.addHobbyCallback.bind(this);
    }

    addHobbyCallback() {
        // 用this.refs.name来取得DOM节点
        let hobbyInput = this.refs.hobby;
        let nameInput = this.refs.name;
        let val = hobbyInput.value + " " + nameInput.value;
        if (hobbyInput.value && nameInput.value) {
            let hobbies = this.state.hobbies;
            hobbies = [...hobbies, val];
            this.setState({
                hobbies
            }, () => {
                hobbyInput.value = '';
                nameInput.value = '';
            });
        } else {
            console.log("空语句.");
        }
    }

    render() {
        const btnStyle = {
            margin: "6px"
        }
        let i = 1;
        return (
            <div>
                <span>姓名: </span>
                <input type="text" ref="hobby" style={btnStyle} />
                <span>爱好:</span>
                <input type="text" ref="name" style={btnStyle} />
                <button style={btnStyle} onClick={this.addHobbyCallback}>添加爱好</button>
                {
                    this.state.hobbies.map(item => {
                        return (<li key={i}>{`${i++}, ${item}`}</li>)
                    }
                    )
                }
            </div>
        )
    }
}

export default Hobby;