Строить URL-адрес реактивного маршрутизатора с входа

Question

Как добавить значение из поля ввода в строку url? В приведенном ниже примере this.refs.foo - undefined.

export class searchTest Component { 
    render() { 
    return (
     <div> 
     <input ref="foo"/> 
     <Link to={`/stuff/${this.refs.foo.value}`}> 
      Find recipes! 
     </Link> 
     </div> 
    ); 
    } 
} 

Answer 1

this.refs.foo не существует на первом рендере, он создается после первого рендера. Вам нужен безопасный по умолчанию, возможно, вынув значение в переменную до возвращения заявления:

export class searchTest Component { 
    render() { 
    var value = this.refs.foo ? this.refs.foo.value : '' 
    return (
     <div> 
     <input ref="foo"/> 
     <Link to={`/stuff/${value}`}> 
      Find recipes! 
     </Link> 
     </div> 
    ); 
    } 
} 

Но даже это не будет работать, если вы не имеете onChange обработчик, прикрепленный к входу. Поскольку у вас есть это прямо сейчас, searchTest не будет перерисовываться при изменении ввода, поэтому пропусковик, переданный в Link, не будет обновляться. То, что вы, вероятно, хотите, чтобы сохранить значение Foo в состоянии searchTest, и ваши Link быть

<Link to={`/stuff/${this.state.foo}`}/> 

вместо использования рефов.