Question

我在2个组件中有2个TextField。当TextField更改值时，我如何发送和更改剩余的TextField值？

这是我的问题的例子。这是我的问题。我有网址http://localhost:8000/search?search=php&category=catqgkv4q01ck7453ualdn3sd&page=1 搜索页面Js：

    class SearchPage extends Component {
    constructor(props) {
        super(props);
        let search = typeof this.props.location.query.search !== '' ? this.props.location.query.search : '';
        if(search){
            this.props.dispatch(setTextSearch(search));
        }
    };
    render() {

        return (
            <MuiThemeProvider>
                <div id='search-page'>
                    <SearchTextBox textSearch={this.props.textSearch}/>
                </div>
            </MuiThemeProvider>
        )
    }
}

// Retrieve data from store as props
function mapStateToProps(state) {
    return {
        textSearch: getTextSearch(state)
    }
}

SearchPage.contextTypes = {
    router: React.PropTypes.object
};
export default connect(mapStateToProps)(SearchPage);

搜索操作：

import callApi from '../../util/apiCaller';

// Export Constants
export const ACTIONS = {
  SET_TEXT_SEARCH: 'SET_TEXT_SEARCH'
};
export function setTextSearch(search) {
  return {
    type: ACTIONS.SET_TEXT_SEARCH,
    search
  };
}

搜索减速器：

import { ACTIONS } from './SeachActions';

// Initial State
const initialState = {
  textSearch: '',
};

const SearchReducer = (state = initialState, action) => {
  switch (action.type) {    
    case ACTIONS.SET_TEXT_SEARCH:
      state.textSearch = action.search;
      return {...state};
    default:
      return state;
  }
};

/* Selectors */

export const getTextSearch = state => state.categories.textSearch;

// Export Reducer
export default SearchReducer;

我有组件SearchTextBox

import React from 'react';
import TextField from 'material-ui/TextField';

export default class SearchTextBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: this.props.textSearch,
        };
    };

    render() {
        return (
            <TextField
                hintText="Search"
                className="search-txtbox"
                ref='searchText'
                style={{height : '40'}}
                underlineShow={false}
                value={this.state.value}

                onChange={this.handleChange}
                autoFocus
                onKeyPress={this.handleEnter}
            />
        );
    }
}

如何通过网址

上的数据参数“搜索”更改值

Answer 1

所以你的问题似乎是与其他组件共享相同的数据（相互传递某种数据，不仅反应组件状态，可能是任何东西）。

您应该了解在组件之间传递数据的可用方法。

1 - 道具

2 - 上下文

3 - 全局变量（反模式直到你真正需要的时候，你需要的时候应该使用redux或类似的东西来利用道具和上下文创建一个大的全局数据树而不创建全局变量）

因此没有其他方法可以在组件之间传递数据。

然后，由于我们知道可用的选项，第二个问题变成了我想要在相对于彼此定位之间传递数据的组件。

1 - 一个是另一个的直接父母。

2 - 一个是另一个的间接父母。

3 - 两者共享同一个父母。

假设您的TextFields共享同一个父级，幸运的是，这是一个可以获得想法的工作代码。

const TextField = ({ 
  value = '', handleInputChange = '' 
}) => <input type="text" value={value} onChange={ handleInputChange }/>

class ParentC extends React.Component {
  state = {
    sharedInputValue : ''
  }
  constructor(props){
    super(props)
    this.state = {
      sharedInputValue : ''
    }
    this.handleInputChange = this.handleInputChange.bind(this)
  }
  handleInputChange( event ){
    this.setState({ sharedInputValue : event.target.value})
  }
  render(){
    return (
      <div>
        <TextField 
          value={ this.state.sharedInputValue }
          handleInputChange={ this.handleInputChange }
        />
        <TextField 
          value={ this.state.sharedInputValue }
          handleInputChange={ this.handleInputChange }
        />
      </div>
    )
  }
}

通过TextField orther更改TextField的状态

1 个答案: