Ändern Sie den Status von TextField von TextField oder

Question

Ich habe 2 TextField in 2 Komponenten. Wenn ein TextField Wert ändern, wie kann ich den Wert von TextField senden und ändern?

---

Dies ist ein Beispiel für mein Problem. Das ist mein Problem. Ich habe url http://localhost:8000/search?search=php&category=catqgkv4q01ck7453ualdn3sd&page=1 Suchseite 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); 

Suchen Aktion:

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 
    }; 
} 

Suche 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; 

Ich habe Komponente 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} 
      /> 
     ); 
    } 
} 

Wie kann ich Wert von Daten Parametern „search“ auf URL

Answer 1

So Ihr Problem scheint zu sein, um die gleichen Daten mit anderen Komponenten teilen (vorbei an irgendeine Art von Daten miteinander, nicht nur die reagieren Komponente ändern Staat, könnte alles sein).

Sie sollten sich der verfügbaren Möglichkeiten zur Datenübertragung zwischen Komponenten bewusst sein.

1 - Props

2 - Kontext

3 - Globale Variablen (Anti - Muster, bis Sie wirklich brauchen, wenn Sie benötigen, sollten Sie redux oder ähnliches verwenden, erstellen Verwendung beider Requisiten und Kontext macht ein großer globaler Datenbaum, ohne globale Variablen zu erzeugen)

Es gibt also keine andere Möglichkeit, Daten zwischen Komponenten zu übertragen.

Dann, da wir verfügbare Optionen kennen, zweite Frage wird, wie die Komponente ich Daten zwischen relativ zueinander positioniert kommunizieren möchte.

1 - Eins ist das direkte Elternteil eines anderen.

2 - Eins ist das indirekte Elternteil eines anderen.

3 - Beide teilen sich das gleiche Elternteil.

Vorausgesetzt, Ihre TextFields teilen sich die gleichen Eltern, zum Glück, hier ist ein Arbeitscode für Sie, um die Idee zu bekommen.

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> 
    ) 
    } 
}