: 关注 React 的问题

Question

我对 ReactJS 比较陌生，我正在尝试实现一个包含输入文本字段和搜索按钮的小表单。我在输入字段上使用 :focus 伪选择器，因此当用户输入信息时，它会将宽度增加到 2000%，当元素失去焦点时，它会返回到 width: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: 设置为放大镜。