Change state of TextField by TextField orther - reactjs

Question

I have 2 TextField in 2 components.
When a TextField change value, how I can send and change value of TextField of remaining?
This is example for my issue. This is my issue.
I have url http://localhost:8000/search?search=php&category=catqgkv4q01ck7453ualdn3sd&page=1
Search page 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);
Search Action:
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
};
}
Search Reducer:
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;
I have component 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}
/>
);
}
}
How can I change value by data parameter "search" on URL

Answer 1

So your problem seems to be about sharing the same data with other components ( passing some kind of data to each other, not only the react component state, could be anything ).
You should be aware of the available ways to communicate data between components.
1 - Props
2 - Context
3 - Global variables ( anti - pattern until you really need, when you need you should use redux or similar that makes use of both props and context to create a big global data tree without creating global variables )
So there is no other way to communicate data between components.
Then since we know available options, second question becomes how are the component I want to communicate data between positioned relative to each other.
1 - One is the direct parent of another.
2 - One is the indirect parent of another.
3 - Both share the same parent.
Assuming your TextFields share the same parent, luckily, here is a working code for you to get the idea.
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>
)
}
}