Реакция заполнения выпадающего из поля ввода

Question

У меня есть простое приложение React, которое позволяет создавать несколько «сюжетных» компонентов при нажатии кнопки. Каждая «история» имеет два компонента - поле ввода (для редактирования заголовка истории) и раскрывающийся список (с отображением всех других заголовков истории).

Я пытаюсь получить в раскрывающемся списке историй все заголовки историй (в данный момент они жестко запрограммированы в массив состояний, называемый storyOptions).

Конечная идея такова: пользователь создает новую историю> заголовок истории обновлений пользователя> пользователь выбирает другую историю для ссылки из выпадающего списка (в раскрывающемся списке отображаются названия всех других историй).

Мой текущий код ниже ...

class App extends Component {

  constructor(props) {
    super(props);
    this.storyList = [];
    this.state = {storys: this.storyList};
  }

  addNewStory(e) {
    this.storyList.push({
      id: this.storyList.length,
      title:"Type your story title here",
    });
    this.setState({storys: this.storyList});
  }

  render() {
    return (
        <div>
          <button className="square" onClick={() => this.addNewStory()}>
            "Add new story"
          </button>
          <div>
              {this.state.storys.map(c => <StoryComponent key={c.id} title={c.title} />)}
          </div>
        </div>
    );
  }
}

export default class StoryComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {
          defaultStoryOption: 0,
          title: this.props.title
        };
        this.storyOptions = [
            'Story 1', 'Story 2'
        ]
        this.handleQuestionChange = this.handleQuestionChange.bind(this);
        this.storyOptionChange = this.storyOptionChange.bind(this);
    }

    handleTitleChange(e) {
        console.log("Title is being updated");
        this.setState({title: e.target.value});
    }

    storyOptionChange(e) {
    }

    getListOfStories() {
        return this.storyOptions;
    }

    render() {
        return (
            <div className="StoryComponent">
                <div>
                    <div>
                        <h3>Title</h3>
                        <input type="text" value={this.state.title} onChange={this.handleTitleChange} />
                    </div>
                    <div>
                        <Dropdown options={this.getListOfStories()} onChange={this.storyOptionChange} value={this.storyOptions[this.state.defaultStoryOption]} placeholder="Select a story" />
                    </div>
                </div>
            </div>
        );
    }
}

Answer 1

Разобрался в конце. Хитрость заключалась в том, чтобы хранить заголовки в виде массива в приложении, а затем передавать заголовки как в раскрывающийся список, так и в поля ввода в StoryComponent в качестве реквизитов.

handleTitleChange(e) {
    console.log("Title is being updated");
    this.setState({title: e.target.value});
}

Изменено на ...

handleTitleChange(e) {
    console.log("Title is being updated");
    this.props.onQuestionUpdate(e); // pass the value back up to App.
}

А внутри приложения у меня теперь есть ...

private onQuestionUpdate(e:any) {
    let storys = this.state.storys;
    storys[Number(e.target.id)] = e.target.value;
    this.setState({storys: storys});
}