我的按鈕沒有從JS React中獲取值並輸入

好吧，所以我想輸入一個名稱到字段中並單擊addname將其添加到列表中，它主要工作，除非您按添加它只是添加一個項目符號指向列表，所以它的空白。我的繼承人代碼我的按鈕沒有從JS React中獲取值並輸入

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> 

     ) 
    } 
}

來源

2017-03-08 matthewg

也許有一些待辦事項與「this.props」，嘗試在類名稱列表的狀態來包裝的價值。 – Sly321

這裏的問題是，你的文字輸入居然沒有當您單擊該按鈕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

主要區別是，我加入onChange到輸入和增加了一個nameToAdd狀態到NameList中分量被每當將TextInput變化更新。一旦你添加了一個名字，它就會清除nameToAdd狀態。

我還使用了一個回調函數setState，當你依賴組件的當前狀態來決定如何更新狀態部分時，這個回調函數是你想要做的。

的反應文檔越過這裏 https://facebook.github.io/react/docs/react-component.html#setstate

它也可以傳遞函數與簽名功能（狀態，道具）=> newState。這會排除原子更新，該值在設置任何值之前會查詢狀態和道具的先前值。舉例來說，假設我們希望通過props.step遞增狀態值：

來源

2017-03-08 16:55:32 finalfreq

我的按鈕沒有從JS React中獲取值並輸入

回答

相關問題