04input框和列表渲染

先看一段代码：

const obj = {
    title: "帮你做决定",
    subtitle: "把你的命运交给电脑吧！",
    options: ["option1"]
}
const showOptions = (options) => {
    if(options && options.length > 0) {
        return "这些是options"
    }else{
        return "没有options"
    }
}


const template = (
    <div>
        <h1>{obj.title}</h1>
        <p>{obj.subtitle}</p>
        <p>{showOptions(obj.options)}</p>
        <ol>
            <li>礼品1</li>
            <li>礼品2</li>
        </ol>
        <form action="">
            <input type="text" name="option"/>
            <button>新增</button>
        </form>
    </div>
)

const root = document.getElementById("app");
ReactDOM.render(template, root)

form表单有一个默认的自动提交到服务器的行为，但是我们要提交到数组中，我们先把它取消。

const formSubmit = (e) => {
    e.preventDefault();
    // 阻止默认行为
    console.log(11)
}
const template = (
    <div>
        <h1>{obj.title}</h1>
        <p>{obj.subtitle}</p>
        <p>{showOptions(obj.options)}</p>
        <ol>
            <li>礼品1</li>
            <li>礼品2</li>
        </ol>
        <form action="" onSubmit={formSubmit}>
            <input type="text" name="option"/>
            <button>新增</button>
        </form>
    </div>
)

默认事件已取消。
代码已写好，都是逻辑代码，没有什么知识点，注意一下key即可。

const obj = {
    title: "帮你做决定",
    subtitle: "把你的命运交给电脑吧！",
    options: []
}
const showOptions = (options) => {
    if(options && options.length > 0) {
        return `这里有${options.length}个英雄`
    }else{
        return "空空如也~"
    }
}

const formSubmit = (e) => {
    e.preventDefault();   // 阻止默认行为
    let option = e.target.elements.option.value;
    if(option) {
        obj.options.push(option);
        e.target.elements.option.value = "";
        render();
    }
}

// 功能: 清空 数组置空
const removeAll = () => {
    console.log(112);
    obj.options = [];
    render();
}
// 功能: 数组中随机选择
const makeDecision = () => {
    // [0, 1) 随机数
    let index = Math.floor(Math.random() * obj.options.length);
    // console.log(index)
    const option = obj.options[index];
    alert(option)
}
// 渲染DOM
const render = () => {
    const template = (
        <div>
            <h1>{obj.title}</h1>
            <p>{obj.subtitle}</p>
            <p>{showOptions(obj.options)}</p>
            <button disabled={obj.options.length == 0} onClick={makeDecision}>幸运英雄</button>
            <button onClick={removeAll}>清空</button>
            {
                // 不可以直接写对象，但是可以写数组 标签 字符 数字 js语法等
                // 数组中 null true false undefined不会显示
                // [1, 2, 3] = {1}, {2}, {3}
                obj.options.map((option, index) => {
                    return <p key={index + "_" + option}>{option}</p>
                    // 需要key值 以防是input标签 不渲染
                })  
            }
            <ol>
                <li>礼品1</li>
                <li>礼品2</li>
            </ol>
            <form action="" onSubmit={formSubmit}>
                <input type="text" name="option"/>
                <button>新增玩家</button>
            </form>
        </div>
    )
    const root = document.getElementById("app");
    ReactDOM.render(template, root)
}
render();

添加功能：

随机选择功能:

清空后置空，并不能选择功能：

有些事件是原生的，有些不是，具体要看文档。