私のボタンはJSから値を取っていません。React

Question

大丈夫ですので、フィールドに名前を入力してaddnameをクリックしてリストに追加したいと思っています。箇条書きを指すので、空白になります。 HERESに私のコード

import React from 'react' 

const List = (props) => <ul> { _.map(props.nameList, (name) => { 
     return <li>{name}</li>})}</ul> 

export default class NameList extends React.Component { 
    constructor() { 
     super() 
     this.state = {nameList: [ "Richard" ]} 
    } 

    render() { 
     var allNames = {nameList: [ "Richard" ]} 
     return (
      <div> 
       <input type ="text" value= {this.props.name}/> 
       <button onClick={() => { this.setState({ nameList: _.concat(this.state.nameList, this.props.name)})}}>AddName</button> 
       <List nameList={this.state.nameList}/> 
      </div> 

     ) 
    } 
} 

Answer 1

ここでの問題は、あなたのテキスト入力は、実際にあなたがthis.props.nameが定義されていないボタンをクリックしたときにそう何に戻って、その値を結ぶ方法がありませんということです。 setStateに電話をかけたときに、その方法で追加したい人の名前の状態が必要な場合は、その値に結びつけることができます。ここに作業コードが更新されました。ここで

import React from 'react'; 

const List = props => <ul> { _.map(props.nameList, name => <li>{name}</li>)}</ul>; 

export default class NameList extends React.Component { 
    constructor() { 
    super(); 
    this.state = { nameList: ['Richard'], nameToAdd: '' }; 
    this.handleClick = this.handleClick.bind(this); 

    } 

    handleClick() { 
    this.setState(prevState => ({ nameList: _.concat(prevState.nameList, this.state.nameToAdd), nameToAdd: '' })); 
    } 

    render() { 

    return (
     <div> 
     <input type="text" value={ this.state.nameToAdd } onChange={ e => this.setState({ nameToAdd: e.target.value }) } /> 
     <button onClick={ this.handleClick }>AddName</button> 
     <List nameList={ this.state.nameList } /> 
     </div> 

    ); 
    } 
} 

はhttp://codepen.io/finalfreq/pen/OpWyqX

主な違いはまた、ワーキングペンでiは入力onChangeを添加し、たびのTextInput変更更新されるネームリストコンポーネントにnameToAdd状態を追加することです。名前を追加すると、nameToAdd状態がクリアされます。

setStateのコールバック関数も使用しました。これは、コンポーネントの現在の状態に依存して、その部分の状態を更新する必要がある場合に行いたいと思っています。

ザがドキュメントを反応は、それが署名 機能（状態、小道具）=> NewStateに持つ関数を渡すことも可能です https://facebook.github.io/react/docs/react-component.html#setstate

ここでその上に行きます。これにより、 の値を設定する前に、以前のstateとpropsの値を参照するアトミック更新がエンキューされます。たとえば、私たちはprops.stepによって状態 の値をインクリメントしたいとします