javascript - 删除按钮按下反应的输入数据

Question

我有一个按钮组件：

import React from 'react';
import styled from 'styled-components';
import StyledInput from './NoteWindow'

const StyledButton = styled.button`
    border: none;
    background: ${props => props.color};
    color: white;
    font-size: 1.5em;
    border-radius: 10px;
    padding: .3em;
    width: 5em;
    height: 2em;
    margin-right: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: ease-in-out 250ms;
    &:focus {
        outline: none;
    }
    &:hover {
        background: white;
        color: ${props => props.color};
        border: ${props => props.color} 1.5px solid;
        transition: ease-in-out 250ms;
    }
`;

const Button = ({ color, name, remove }) => {

    return (
        <StyledButton color={color} remove={remove} onClick={remove == 'true' ? StyledInput.value = '' : false}>{name}</StyledButton>
    )
};

export default Button;

和一个输入组件：

import React from 'react';
import Button from './Button';
import styled from 'styled-components';
const NoteWindow = (props) => {
return (
    <StyledNoteWindow className="NoteWindow">
        <StyledForm action="#" className="form">
            <StyledInput type="text" name="title" id="title" className="inp" autoComplete="off" placeholder="Title" style={{fontSize: 60, fontWeight: 700}}/>
            <StyledInput type="text" name="content" id="content" className="inp" autoComplete="off" placeholder="Content.." style={{fontSize: 20}}/>
        </StyledForm>
        <StyledButtonsContainer>
            <Button name="Discard" color={red} remove='true'/>
            <Button name="Save" color={blue}/>
        </StyledButtonsContainer>
    </StyledNoteWindow>
)

}

导出默认 NoteWindow；

<Button name="Discard" color={red} remove='true'/>

目的：如果remove属性等于'true'删除输入组件的输入数据，否则什么都不做。有没有办法做到这一点？提前致谢。它告诉我只有代码，所以我要添加一些文本

标签： javascriptreactjs