：React的焦點問題

Question

我是ReactJS的新手，我正在嘗試實現一個包含輸入文本字段和搜索按鈕的小型表單。 我在輸入字段上使用：focus偽選擇器，因此，當用戶輸入信息時，它將寬度增加到2000％，而當元素失去焦點時，它將返回寬度：130％。

我遇到的問題是，當我第一次單擊搜索按鈕時，輸入字段會縮小到原始位置，但是直到我第二次單擊它時，它才執行搜索。 如果我鍵入一些內容，然后單擊其他位置以使其失去焦點，則它的工作原理就像一種魅力。

這是我的代碼：

import React from 'react'
import Header from '../base/header'
import axios from 'axios'
import SearchResults from './searchResults'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import Radium from 'radium';

class Search extends React.Component {

    constructor(props) {

        super(props)

        this.state = {
            searchTerm: "",
            searchResultsList: ""
        }

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleCallback = this.handleCallback.bind(this);

    }

    handleCallback() {

        console.log("calling handleSubmit");
    }


    handleSubmit() {

        var that = this
        event.preventDefault();

        axios.post('http://localhost:3000/users/findusers', {

            searchTerm: this.state.searchTerm

        }).then(function (response) {

            console.log("data sent");
            that.setState({searchResultsList: response.data})

        }).catch(function (error) {
            console.log(error);
        });
    }

    handleChange(e) {

        this.setState({searchTerm: e.target.value}, () => {
            console.log(this.state.searchTerm);

        });
    }


    render() {
        return (
            <div>
                <Header/>
                <form onSubmit={this.handleSubmit}>
                    <div>
                        <ReactCSSTransitionGroup
                            transitionName="search-input"
                            transitionAppear={true}
                            transitionAppearTimeout={500}
                            transitionEnter={false}
                            transitionLeave={false}>
                            <input
                                type="text"
                                style={styles.inputStyle}
                                value={this.state.searchTerm}
                                onChange={this.handleChange}
                                placeholder="Find Friends..."
                            />

                            {/*<img onClick={() => this.handleSubmit()} */}

                            <img src="/icons/svg/magnifying-glass.svg"
                                     alt="Search" className="searchIcon"
                             onClick={() => this.handleCallback()}
                            />
                            </ReactCSSTransitionGroup>
                </div>
                </form>

                <div className="container-fluid">
                    <div className="row">
                        <div className="col-md-3">left</div>
                        {/* Main Area */}
                        <div className="col-md-6">
                            <SearchResults
                             searchResultsList={this.state.searchResultsList}
                            />
                        </div>
                        <div className="col-md-3">right</div>
                    </div>
                </div>
            </div>
        )
    }
}

const styles = {

    inputStyle: {
        marginTop: 5,
        marginLeft: 20,
        width: 130,
        WebkitTransition: 'width 0.4s easeInOut',
        msTransition: 'width 0.4s easeInOut',
        ':focus': {
            width: '2000%'
        }
    }
};

export default Radium(Search)

我最初將代碼保存在單獨的CSS文件中，並決定將其內聯以查看是否存在任何差異。 我嘗試創建不同的函數以查看是否存在任何差異，但仍然表現相同。

我將非常感謝您的幫助！

Answer 1

關於單擊放大鏡時的寬度變化。 我相信這是因為:focus屬性位於輸入上，而不是包含輸入和img的div。

我建議在父div上使用:focus-within屬性。 這是同時具有兩個屬性的div的示例。

 #div1:focus-within > input { width: 300px; } #div2 > input:focus { width: 300px; } 

 <div id="div1"> <input type="text"/> <button>Search</button> </div> <div id="div2"> <input type="text"/> <button>Search</button> </div> 

這應該解決焦點問題。

不知道為什么您的放大鏡圖像會如此奇怪。 在閱讀代碼時，似乎單擊圖像會調用handleCallback() ，這僅記錄未提交。

不確定是否有幫助，但是我建議使用按鈕或輸入元素進行提交。 該按鈕的type="submit" ，其中放大鏡圖像為子級。 輸入將具有type="submit" value=""並將CSS background-image:設置為放大鏡。