：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:设置为放大镜。