ホーム>source

このプログラムの本質は、入力に値を入力すると、2つの乱数と2つのランダムな文字列を取得することです。 onChangeイベントは数値の入力中に価値があるため、変更してレンダリングする必要があります。しかし、数字は表示されません。ただし、React Developer Toolsを使用すると、値が生成されることがわかります。

すべてのコード:

<html>
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class TextInput extends React.Component {
            constructor(props) {
                super(props);
                this.state = {dropDownList: null};
                this.eachRender = this.eachRender.bind(this);
            }

            eachRender() {
                this.eachNumbers = [Math.random(0,10), Math.random(0,10)]; //Numbers are generated randomly
                this.eachString = ["One random string", "Another random string"]; //Strings are also generated randomly, in order to simplify the code, they were given static values
                var text = document.getElementById("text").value;
                if (text !== ""){
                    this.setState({dropDownList: <DropDownList numbers = {this.eachNumbers} someString = {this.eachString}/>});
                }
                else this.setState({dropDownList: null});
            }
            render() {
                    return ( <div>
                        <input type="text" id="text" onChange={this.eachRender}>
                        </input>
                        {this.state.dropDownList}
                    </div> )
            }
        }
        class DropDownList extends React.Component {
        constructor(props) {
        super(props);
        this.eachTask = this.eachTask.bind(this);
        this.state = { items: [ //The data should be presented as follows
            {id: 1, item: this.props.numbers[0], href: this.props.someString[0]}, 
            {id: 2, item: this.props.numbers[1], href: this.props.someString[1]},
        ] };
    }
    eachTask(items) {
            return(
                <li key = {items.id}>
                    Rund Number: <b>{items.item.toFixed(3)}</b> <br></br>
                    Rund String  <b>{items.href}</b>
                </li>
        )
    }
    render() {
        return(
            <ul>
                {this.state.items.map(this.eachTask)}
            </ul>
        )
    }

    } 
     ReactDOM.render(
     <TextInput />, document.getElementById("app")
     )
</script>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
</body>
</html>

問題はこのコード行を中心に展開すると思います。

this.state = { items: [ 
        {id: 1, item: this.props.numbers[0], href: this.props.someString[0]}, 
        {id: 2, item: this.props.numbers[1], href: this.props.someString[1]},
    ] };

これはどのように修正できますか?

あなたの答え
  • 解決した方法 # 1

    setState を使用する   this.state の値を変更する場合 。

    Reactドキュメントごと:

    Never mutate this.state   setState() を呼び出して直接  その後、作成した突然変異を置き換えることができます。 this.stateを不変であるかのように扱います。

  • 解決した方法 # 2

    私の英語が下手で申し訳ありません

    DropDownListprops をレンダリングする   state の代わりに直接 ; 新しい DropDownList を作成するようです  メソッド eachRender 内 、しかし唯一の違いは props 、コンソールで印刷できます。 ようこそ提案:)

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ android - Google Playストアから公開済みアプリのリストを取得しています