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的示例。

＆＃13;

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

＆＃13;

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

＆＃13;

这应解决焦点问题。

不确定为什么你的放大镜图像如此奇怪。在阅读代码时，似乎单击图像会调用handleCallback()，它只记录未提交。

不确定这是否有帮助，但我建议使用按钮或输入元素进行提交。该按钮具有type="submit"，放大镜图像为孩子。输入将为type="submit" value=""，并将CSS background-image:设置为放大镜。

：关注React问题

1 个答案: