Рендеринг компонентов React / Redux - PullRequest
Новая
       21

Рендеринг компонентов React / Redux

0 голосов
/ 14 сентября 2018

Я новичок в React-redux и очень запутался в том, когда и что влияет на обновления, возникающие при этой конкретной проблеме. (!) Когда я помещаю функцию handleAdd () в компонент AddForm, представления обновляются и ничего не добавляется. 

const AddForm=(props)=>{

const add=(e)=>{
  props.handleAdd(props.addUrl);   
} 
     return(
        <div>
        <h4>ADD URL</h4>
        <form>
            <span>URL:</span>
            <input type="text" placeholder='Enter your url' onChange= . 
  {props.getUrl}/>
            <button onClick={add}>Add</button>
            <button onClick={props.handleCancel}>Cancel</button>
        </form>
        </div>
    );   
 };
 //button function add and delete`enter code here`
 class ButtonAD extends React.Component{
  constructor(props){
    super(props);
    this.state={addUrl:''};
    this.getUrl=this.getUrl.bind(this);
    this.add=this.add.bind(this);

    }
   getUrl(e){
    e.preventDefault();
    this.setState({addUrl:e.target.value});
   }
  add(){
    this.props.handleAdd(this.state.addUrl);
  }
   render(){


    return (
        <div className="button-add-delete">
            <button onClick={this.props.handleRemove}>DELETE</button>
            <button onClick={this.props.toggleHidden}>ADD</button>
            {!this.props.isHidden && <AddForm addUrl= . 
   {this.state.addUrl} handleCancel={this.props.handleCancel} getUrl= . 
   {this.getUrl}/>}

        </div>
    );
     }
   }

  const ConnectedButtonAD=ReactRedux.connect(

  //Map action dispatchers to props
 null,(dispatch)=>({
    handleRemove:()=>dispatch(actionCreators.handleRemove()),
     handleAdd:(url)=>dispatch(actionCreators.handleAdd(url))
  }) 

 )(ButtonAD);
 export default ConnectedButtonAD;

Но когда я помещаю handleAdd () в ButtonAD, представления не обновляются, и в представлениях что-то добавляется. 

 class ButtonAD extends React.Component{
    constructor(props){
    super(props);
    this.state={addUrl:''};
    this.getUrl=this.getUrl.bind(this);
    this.add=this.add.bind(this);

}
getUrl(e){
    e.preventDefault();
    this.setState({addUrl:e.target.value});
  }
add(){
    this.props.handleAdd(this.state.addUrl);
}
render(){


    return (
        <div className="button-add-delete">
            <button onClick={this.props.handleRemove}>DELETE</button>
            <button onClick={this.props.toggleHidden}>ADD</button>
            {!this.props.isHidden && <AddForm addUrl={this.state.addUrl} handleCancel={this.props.handleCancel} getUrl={this.getUrl}/>}
            <button onClick={this.add}>ADDD</button>
        </div>
    );
     }
    }
...