React добавить систему пользовательского поиска Google - PullRequest
0 голосов
/ 28 мая 2020

Я создал свою систему пользовательского поиска Google, но я не уверен, как реализовать ее в визуализированном представлении, в котором я хотел бы его использовать. В идеале я бы хотел, чтобы поиск находился в моем представлении добавления источника данных вверху чтобы пользователь мог искать изображения и копировать адрес изображения для сохранения в моей базе данных. Ниже приведен фрагмент моего рендера, а также мой пользовательский поиск.

<script async src="https://cse.google.com/cse.js?cx=012056199083638932151:g7nct1fc1mb"></script>
<div class="gcse-search"></div>
 render() {
    // determine what content to return
    const validated = this.state.name.length > 10 && this.state.info_url.length > 10 && this.state.screenshot_url.length > 10

    if (this.state.visible === false) {
        // render form input to new data source
        return (

            <Card>
                (I would like the search to be here at the top of the form so the user can copy 
                  as needed to add to the form below)

                <Card.Header> Add New Data Source</Card.Header>
                <Form onSubmit={event => this.handleSubmit(event)}>



                    <Form.Group>
                        <Form.Control size="lg" type="text" name="name" value={this.state.name} onChange={event => this.handleChange(event)} placeholder="Name of Source" />
                    </Form.Group>

                    <Form.Group>
                        <Form.Control size="lg" type="text" name="info_url" value={this.state.info_url} onChange={event => this.handleChange(event)} placeholder="Source URL" />
                    </Form.Group>

                    <Form.Group>
                        <Form.Control size="lg" type="text" name="screenshot_url" value={this.state.screenshot_url} onChange={event => this.handleChange(event)} placeholder="Source URL image" />
                    </Form.Group>


                    <Form.Group>
                        <Button disabled={!validated} type="submit">Add Source</Button>
                    </Form.Group>
                </Form>
            </Card>
        )
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...