React + Material UI - 文本字段“onChange”从未触发

Question

我尝试在我的 Textfield 被填充时触发 onchange 函数，但我无法弄清楚为什么这个函数从未被触发，即使 Chrome 的 React devtool 插件实际上触发了更改，有什么建议吗？

import React, {Component} from 'react';
import {Tracker} from 'meteor/tracker';
import {Meteor} from 'meteor/meteor';
import {Links} from '../api/links';
import LinkListItem from './LinkListItem';
import {Session} from 'meteor/session';
import SearchLink from './SearchLink';
import Fuse from 'fuse.js';

export default class LinkList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            links: [],
            inputValue: ''
        };
    }
    componentDidMount() {
        this.linksTracker = Tracker.autorun(() => {
            Meteor.subscribe('links');

            const links = Links.find({visible: 
            Session.get('showVisible')}).fetch();
            this.setState({links});
        });
    }
    componentWillUnmount() {
        this.linksTracker.stop();
    }
    renderLinksListItems() {
        if (this.state.links.length === 0) {
                return (
                    <div>
                        <h2 className="link">{Session.get('showVisible') ? 'No links found' : 'No hidden links found'}</h2>
                    </div>
                );
        }
        console.log(this.state.links);
        return this.state.links.map((link) => {
            const shortUrl = Meteor.absoluteUrl(link._id);
            return <LinkListItem key={link._id} shortUrl={shortUrl} {...link}/>;
        });
    }
    _onChange(e) {
        if(e.target.value === "") {
            return;
        }
        var fuse = new Fuse(this.state.links, { keys: ["url"]});
        var result = fuse.search(e.target.value);
        this.setState({
            inputValue: e.target.value,
            links: result
        });
    }
    render() {
        return (
            <div>
              <div>
                  <SearchLink onChange={this._onChange} value={this.state.inputValue}/>
              </div>
              <div>{this.renderLinksListItems()}</div>
            </div>
        );
    }
}

我的文本域组件：

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import TextField from 'material-ui/TextField';

const muiTheme = getMuiTheme({
  palette: {
      primary1Color: '#ef6c00'
  }
})

const SearchLink = () => (
  <MuiThemeProvider muiTheme={muiTheme}>
    <TextField floatingLabelText="Search a Link" name="searchLink" fullWidth={true}/>
  </MuiThemeProvider>
);

export default SearchLink;

感谢您的帮助！

Answer 1

做这些改变：

1. 绑定Parent组件LinkList中的方法，因为你在onChange方法里面使用this.setState，如果不bind它会抛出错误, bind 是这样的：

<SearchLink onChange={this._onChange.bind(this)} value={this.state.inputValue}/>

或在constructor 中定义binding。

2.您在props 中传递event 和value，因此您需要在TextField 中定义这些值，如下所示：

const SearchLink = (props) => (
    <MuiThemeProvider muiTheme={muiTheme}>
        <TextField 
             onChange = {props.onChange} 
             value = {props.value} 
             floatingLabelText = "Search a Link" 
             name = "searchLink" 
             fullWidth = {true}/>
    </MuiThemeProvider>
);