javascript - How do I add a button component in ReactJS? - Stack Overflow

admin管理员组

文章数量:1390896

So I'm rendering ponents from an array 'values': ["hello", "world] successfully but I would like to add a button ponent so that every time it gets clicked, another empty field shows up. This is what it currently looks like:

but i would like it so that there is a button and every time I click on it, it renders another empty ponent to input text. Would it be correct to add a button ponent directly inside the my array_node.jsx file? Is what I'm doing correct so far? Would I also have to add some sort of newInput: function() in side the var AddButton = React.createClass({})? Thank you!

array_node.jsx:

{...
    childChange: function(name, valid, value) {

        // update state
        this.state.values = this.props.values;

        // Using regex to find last digits from 0-9
        var pattern = /[0-9]/;
        var match = name.match(pattern);

        // Parse char into int
        var i = parseInt(match);

        this.state.values[i] = value;
        this.setState(this.state);

        // Call parent callback
        this.props.callback(
            this.props.name,
            this.props.node.valid(this.state.values),
            this.state.values
        );
    },
    addItem: function(values){
    },

        render: function() {
            var that = this;

            return (
                <div id = "form">
                {this.props.values.map(function(v, i) {
                    return (
                        <div>
                        {(that.props.node.get().constructor.name === "Parent") ?
                        <ParentComponent
                            name={that.props.name + i}
                            key={i}
                            timer={that.props.timer}
                            callback={that.childChange}
                            values={v}
                            newParent={that.props.node.get()}
                        />
                        :
                        <NodeComponent
                            name={that.props.name + i}
                            key={i}
                            timer={that.props.timer}
                            callback={that.childChange}
                            value={v}
                            newNode={that.props.node.get()}
                        />
                        }
                        </div>
                    )
                })}
                </div>
           )
        }
    });
    return ArrayNodeComponent


var AddButton = React.createClass({
    addItem: function() {

    },

    render: function() {

        return(
        <div id="create_new_entry">

        </div>
        )
    }
})

formatoc:

var props = {
    'name' : 'form',
    'timer' : 1500,
    'callback' : function(id, validity, value) {console.log(id, validity, value);},
    'values': ["hello", "world"],

    'node' : new FormatOC.ArrayNode({"__array__":"unique", "__type__":"string","__minimum__":1,"__maximum__":200,"__ponent__":"Input"},
    )
}

React.render(React.createElement(ArrayNodeComponent, props), document.getElementById('react-ponent'));

So I'm rendering ponents from an array 'values': ["hello", "world] successfully but I would like to add a button ponent so that every time it gets clicked, another empty field shows up. This is what it currently looks like:

but i would like it so that there is a button and every time I click on it, it renders another empty ponent to input text. Would it be correct to add a button ponent directly inside the my array_node.jsx file? Is what I'm doing correct so far? Would I also have to add some sort of newInput: function() in side the var AddButton = React.createClass({})? Thank you!

array_node.jsx:

{...
    childChange: function(name, valid, value) {

        // update state
        this.state.values = this.props.values;

        // Using regex to find last digits from 0-9
        var pattern = /[0-9]/;
        var match = name.match(pattern);

        // Parse char into int
        var i = parseInt(match);

        this.state.values[i] = value;
        this.setState(this.state);

        // Call parent callback
        this.props.callback(
            this.props.name,
            this.props.node.valid(this.state.values),
            this.state.values
        );
    },
    addItem: function(values){
    },

        render: function() {
            var that = this;

            return (
                <div id = "form">
                {this.props.values.map(function(v, i) {
                    return (
                        <div>
                        {(that.props.node.get().constructor.name === "Parent") ?
                        <ParentComponent
                            name={that.props.name + i}
                            key={i}
                            timer={that.props.timer}
                            callback={that.childChange}
                            values={v}
                            newParent={that.props.node.get()}
                        />
                        :
                        <NodeComponent
                            name={that.props.name + i}
                            key={i}
                            timer={that.props.timer}
                            callback={that.childChange}
                            value={v}
                            newNode={that.props.node.get()}
                        />
                        }
                        </div>
                    )
                })}
                </div>
           )
        }
    });
    return ArrayNodeComponent


var AddButton = React.createClass({
    addItem: function() {

    },

    render: function() {

        return(
        <div id="create_new_entry">

        </div>
        )
    }
})

formatoc:

var props = {
    'name' : 'form',
    'timer' : 1500,
    'callback' : function(id, validity, value) {console.log(id, validity, value);},
    'values': ["hello", "world"],

    'node' : new FormatOC.ArrayNode({"__array__":"unique", "__type__":"string","__minimum__":1,"__maximum__":200,"__ponent__":"Input"},
    )
}

React.render(React.createElement(ArrayNodeComponent, props), document.getElementById('react-ponent'));

• javascript
• reactjs

Share Improve this question Follow edited May 16, 2018 at 19:02 Sam asked May 15, 2018 at 13:16 SamSam 50533 gold badges1111 silver badges2020 bronze badges 2

• 1 Your code seems to be very outdated. Is there a reason you are using React.createClass instead of es6 classes? If you are starting to learn react I can strongly remend to make use of the es6 syntax. I have literally nobody seen writing react code like this for ages except for some weird project requirements. – trixn Commented May 15, 2018 at 13:30
• Absolutely what @trixn said, it seems that you may need to read up on some more modern examples, take a look at the react docs, they are pretty good for getting started reactjs/tutorial/tutorial.html – Ben Lonsdale Commented May 15, 2018 at 14:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You might add a button into your form within the render function. Then listen to clicks and add a new empty element to your values list.

if you would like to propagate the changes to some parent ponent, you would have to pass the onClick handler from the parent ponent and update the values list there too.

import { Component } from 'react';

class ArrayNodeComponent extends Component {

  // other code ...
  // like your initialisation of your state
  // and other functions

  addEmptyItem() {
    const { values } = this.state;
    this.setState({
      values: [...values, ""]
    });
  }

  render() {
    return (
      <form id="test">
        {
          /* this is your values map routine, shortened */
          this.props.values.map(function(v, i) { /*...*/ })
        }
        <button onClick={() => this.addEmptyItem()}>Add</button>
      </form>
    );
  }

}

Btw in this simple scenario, it would not make sense to create a custom Button ponent.

本文标签： javascriptHow do I add a button component in ReactJSStack Overflow