javascript - 选择、文本区域和按钮（绑定）

Question

我有选择、文本区域和按钮。这是我做不到的。如果在 Select 中选择项目，则单击 Button。应复制从 Select 中选择的值并添加 TextArea 并将光标放在下一行。

我很高兴收到任何建议。你甚至可以改变整个操作原理。任务。我需要填写TextArea。选择中的建议选项。

我试过了，但是没有用...

import React from 'react';

class App extends React.Component {
    constructor()
    {
        super();
        this.state = {
            id: null,
            title: '',
            filmItem: '',
            listFilms: [],
            data:
            [
                    { id: 1, title: 'title1' },
                    { id: 2, title: 'title2' },
                    { id: 3, title: 'title3' },
                    { id: 4, title: 'title4' }
            ]
        };
        this.onChange = this.onChange.bind(this);
        this.onChangeArea = this.onChangeArea.bind(this);
        this.addFilm = this.addFilm.bind(this);
        this.choice = this.choice.bind(this);
    }

    addFilm(film)
    {
        this.setState({
        listFilms:
            [...this.state.listFilms, film]
         });
    }

    onChange = e => {
        this.setState({ [e.target.name]: e.target.value })
    }

    onChangeArea = e => {
        this.setState({ [e.target.name]: e.target.value.split("\n") })
    }

    choice(title)
    {
        this.setState({filmItem: title,})
    }

    render() {
        return (
            <div className="App">
                <div className="row App-main">
                    <form>
                        <div>
                            <select name="cars" size="4" >
                                {
                                    this.state.data.map(film =>
                                        <option selected value={film.title} >
                                            {film.title}
                                        </option>
                                    )
                                }
                            </select>
                        </div>
                        <div>
                            <button class="editButton" noClisk={() => this.addFlim(this.state.filmItem)}> button </button>
                        </div>
                        <div>
                            <textarea name="films" onChange={this.onChangeArea} value={this.state.listFilms.map(r => r).join("\n")} />
                        </div>
                        <div>
                            <input type="text" onChange={this.onChange} />
                        </div>
                    </form>
                </div>
            </div>
        );
    }

}
export default App;

标签： javascripthtmlreactjs